jQuery(document).ready(function ($) {

    // Options pour gérer le popoup (back-office)
    function updateValues() {
        // $('#type').val() === 'card' ? $('label[for="width"]').css('display', 'inline-block') : $('label[for="width"]').css('display', 'none');
        switch ($('#type').val()) {
            case 'card':
                $('label[for="width"]').css('display', 'initial');
                $('label[for="position_x_val"], label[for="position_x_side"], option[value="center"]').css('display', 'inline-block');
                break;
            case 'band':
                $('label[for="width"]').css('display', 'none');
                $('#position_type').val('side');
                $('#position_x_side').val('left'); // ok
                $('#position_x_val').val('0'); // ok
                $('label[for="position_x_val"], label[for="position_x_side"], option[value="center"]').css('display', 'none');
                break;
        }
        switch ($('#position_type').val()) {
            case 'side':
                $('label[for="position_y_side"]').css('display', 'inline-block');
                $('label[for="position_y_val"]').css('display', 'inline-block');
                ($('#type').val()) === 'band' ? null : $('label[for="position_x_side"]').css('display', 'inline-block');
                ($('#type').val()) === 'band' ? null : $('label[for="position_x_val"]').css('display', 'inline-block');
                break;
            case 'center':
                $('#position_y_side').val('top');
                $('#position_x_side').val('left');
                $('label[for="position_y_side"]').css('display', 'none');
                $('label[for="position_x_side"]').css('display', 'none');
                $('label[for="position_y_val"]').css('display', 'none');
                $('label[for="position_x_val"]').css('display', 'none');
                break;
        }
    }
    updateValues();
    $('select').each(function () {
        $(this).on('change', updateValues);
    })

    var mediaUploader;
    // check si il y a une source dans vidéo et image au chargement de la page
    function checkMedia() {
        $('#meta-box-video-preview').attr('src') == '' ? $('#meta-box-video-preview').css('display', 'none') : $('#meta-box-video-preview').css('display', 'initial');
        $('#meta-box-image-preview').attr('src') == '' ? $('#meta-box-image-preview').css('display', 'none') : $('#meta-box-image-preview').css('display', 'initial');
    }
    checkMedia();
    // ajouter un média (image ou video) ------------------------------------------------------------------------
    $('#meta-box-image-button').on('click', function (e) {
        e.preventDefault();
        var mediaUploader;
        mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'Choisir une image',
            button: {
                text: 'Choisir une image'
            },
            multiple: false
        });
        mediaUploader.on('select', function () {
            var attachment = mediaUploader.state().get('selection').first().toJSON();
            let fileExtension = attachment.url.split('.').pop().toLowerCase();
            let isImage = ['jpg', 'jpeg', 'png', 'gif'].indexOf(fileExtension) !== -1;
            if (isImage) {
                $('#meta-box-image-preview').attr('src', attachment.url);
                $('#meta-box-image').val(attachment.id);
                $('#meta-box-video-preview').attr('src', '');
                $('#meta-box-video').val('');
                checkMedia();
            } else {
                $('#meta-box-video-preview').attr('src', attachment.url);
                $('#meta-box-video').val(attachment.id);
                $('#meta-box-image-preview').attr('src', '');
                $('#meta-box-image').val('');
                checkMedia();
            }
        });
        mediaUploader.open();
    });
    $('#meta-box-image-button-remove').on('click', function (e) {
        e.preventDefault();
        $('#meta-box-image').val('');
        $('#meta-box-image-preview').attr('src', '');
        $('#meta-box-video').val('');
        $('#meta-box-video-preview').attr('src', '');
    });
    // si média = vidéo alors ajouter un poster ------------------------------------------------------------------------
    $('#meta-box-poster-button').on('click', function (e) {
        e.preventDefault();
        var mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'Choisir une image',
            button: {
                text: 'Choisir une image'
            },
            multiple: false
        });
        mediaUploader.on('select', function () {
            var attachment2 = mediaUploader.state().get('selection').first().toJSON();
            let fileExtension2 = attachment2.url.split('.').pop().toLowerCase();
            let isImage2 = ['jpg', 'jpeg', 'png', 'gif'].indexOf(fileExtension2) !== -1;
            if (isImage2) {
                $('#meta-box-poster-preview').attr('src', attachment2.url);
                $('#meta-box-poster').val(attachment2.id);
                checkMedia();
            } else {
                return;
            }
        });
        mediaUploader.open();
    });
    $('#meta-box-poster-button-remove').on('click', function (e) {
        e.preventDefault();
        $('#meta-box-poster').val('');
        $('#meta-box-poster-preview').attr('src', '');
    });

    // ecoute changement de média 
    $('#meta-box-video-preview').attr('src') === '' ? $('.add_poster').css('display', 'none') : $('.add_poster').css('display', 'block');
    $('#meta-box-video-preview').on('loadeddata emptied', function () {
        $('#meta-box-video-preview').attr('src') === '' ? $('.add_poster').css('display', 'none') : $('.add_poster').css('display', 'block');
    })
})