/**
 * Image uploader functions
 */

const initUploadMediaImage = (selector) => {
    jQuery('body').on('click', selector, function(e) {
        e.preventDefault();

        const $button = jQuery(this);
        const $mediaView = $button.closest('.attachment-media-view');
        const $imgContainer = $mediaView.find('.thumbnail-image');
        const $placeholder = $mediaView.find('.placeholder');
        const $input = $button.siblings('.upload-id');

        const frame = wp.media({
            title: 'Select or Upload Image',
            button: {
                text: 'Use Image'
            },
            multiple: false
        });

        frame.on('select', () => {
            const attachment = frame.state().get('selection').first().toJSON();
            $imgContainer.html(`<img src="${attachment.url}" style="max-width:100%;" />`);
            $placeholder.addClass('hidden');
            $input.val(attachment.url).trigger('change');
        });

        frame.open();
    });
};

const initDeleteMediaImage = (selector) => {
    jQuery('body').on('click', selector, function(e) {
        e.preventDefault();

        const $button = jQuery(this);
        const $mediaView = $button.closest('.attachment-media-view');
        const $imgContainer = $mediaView.find('.thumbnail-image');
        const $placeholder = $mediaView.find('.placeholder');
        const $input = $button.siblings('.upload-id');

        $imgContainer.find('img').remove();
        $placeholder.removeClass('hidden');
        $input.val('').trigger('change');
    });
};

jQuery(($) => {
    'use strict';

    // Initialize jQuery UI buttonset for radio image controls
    $('.mt-meta-options-wrap .buttonset').buttonset();

    // Initialize image upload/delete functionality
    initUploadMediaImage('.mt-upload-button');
    initDeleteMediaImage('.mt-delete-button');
});