import MediaUpload from "../../Utils/MediaUpload";

class BackgroundCpt {

    _type = '';
    init() {
        if (!jQuery('.choose-bck')[0]) {
            return;
        }
        this._type = jQuery('.choose-bck').val();
        this._handleEvents();
    }

    _handleEvents() {
        const _this = this;
        jQuery('.choose-bck').on('change', function(event) {
            event.preventDefault();
            _this._type = jQuery(this).val();

            if (!jQuery('.img-container').hasClass('hidden')) {
                jQuery('.img-container').addClass('hidden');
            }
            if (!jQuery('.video-container').hasClass('hidden')) {
                jQuery('.video-container').addClass('hidden');
            }
            if (_this._type === 'image') {
                jQuery('.img-container').removeClass('hidden');
            } else if (_this._type === 'video') {
                jQuery('.video-container').removeClass('hidden');
            }
        });

        jQuery('#upload_video_btn').on('click', function(event) {
            event.preventDefault();

            MediaUpload.upload(false, function(attachments) {
                if (attachments.length > 0) {
                    const { id, filename, url } = attachments[0];
                    jQuery('#video_id').val(id);
                    jQuery('.video_file_name').html(filename);
                    jQuery('.video_file_name').attr('href', url);
                }
                _this._handlePopulate();
            }, window?.OXYLEAF_ADMIN_SETTINGS?.labels?.select_background, ['video'], window?.OXYLEAF_ADMIN_SETTINGS?.labels?.add_background);
        });

        jQuery('#remove_video_btn').on('click', function(event) {
            event.preventDefault();
            if (confirm(window?.OXYLEAF_ADMIN_SETTINGS?.labels?.deleted_background)) {
                jQuery('#video_id').val('');
                jQuery('.video_file_name').html('');
                _this._handlePopulate();
            }
        })

        jQuery('#upload_video_icon_btn').on('click', function(event) {
            event.preventDefault();

            MediaUpload.upload(false, function(attachments) {
                if (attachments.length > 0) {
                    const { id, filename, url } = attachments[0];
                    jQuery('#video_icon_id').val(id);
                    jQuery('.video_icon_filename').html(filename);
                    jQuery('.video_icon_filename').attr('href', url);
                    jQuery('.video_icon_preview_ui img').attr('src', url);
                    jQuery('.video_icon_preview_ui').show();
                }
                _this._handlePopulateVideoPreview();
            }, window?.OXYLEAF_ADMIN_SETTINGS?.labels?.select_background_preview, ['image'], window?.OXYLEAF_ADMIN_SETTINGS?.labels?.add_background_preview);
        });

        jQuery('#remove_video_icon_btn').on('click', function(event) {
            event.preventDefault();
            if (confirm(window?.OXYLEAF_ADMIN_SETTINGS?.labels?.deleted_background_preview)) {
                jQuery('#video_icon_id').val('');
                jQuery('.video_icon_filename').html('');
                _this._handlePopulateVideoPreview();
            }
        })

        jQuery('#upload_bk_image_btn').on('click', function(event) {
            event.preventDefault();

            MediaUpload.upload(false, function(attachments) {
                if (attachments.length > 0) {
                    const { id, filename, url } = attachments[0];
                    console.log('attachments', attachments[0]?.sizes?.thumbnail?.url);
                    jQuery('#bk_image_id').val(id);
                    jQuery('.bk_image_filename').html(filename);
                    jQuery('.bk_image_filename').attr('url', url);
                    jQuery('.bk_image_preview_ui img').attr('src', url);
                    jQuery('.bk_image_preview_ui').show();
                }
                _this._handlePopulateIcon();
            }, window?.OXYLEAF_ADMIN_SETTINGS?.labels?.select_background_img, ['image'], window?.OXYLEAF_ADMIN_SETTINGS?.labels?.add_background_img);
        });

        jQuery('#remove_bk_image_btn').on('click', function(event) {
            event.preventDefault();
            if (confirm(window?.OXYLEAF_ADMIN_SETTINGS?.labels?.deleted_background_img)) {
                jQuery('#bk_image_id').val('');
                jQuery('.bk_image_filename').html('');
                _this._handlePopulateIcon();
            }
        })

        this._handlePopulateVideoPreview();
        this._handlePopulateIcon();
    }

    _handlePopulate() {
        const sound_id = jQuery('#video_id').val();
        if (sound_id && sound_id !== '') {
            jQuery('#remove_video_btn').removeClass('d-none');
            jQuery('.video_file_name_ui').removeClass('d-none');
        } else {
            jQuery('#remove_video_btn').addClass('d-none');
            jQuery('.video_file_name_ui').addClass('d-none');
        }
    }

    _handlePopulateVideoPreview() {
        const icon_id = jQuery('#video_icon_id').val();
        if (icon_id && icon_id !== '') {
            jQuery('#remove_video_icon_btn').removeClass('d-none');
            jQuery('.video_icon_filename_ui').removeClass('d-none');
            jQuery('.video_icon_preview').show();
        } else {
            jQuery('#remove_video_icon_btn').addClass('d-none');
            jQuery('.video_icon_filename_ui').addClass('d-none');
            jQuery('.video_icon_preview').hide();
        }
    }

    _handlePopulateIcon() {
        const icon_id = jQuery('#bk_image_id').val();
        if (icon_id && icon_id !== '') {
            jQuery('#remove_bk_image_btn').removeClass('d-none');
            jQuery('.bk_image_filename_ui').removeClass('d-none');
            jQuery('.bk_image_preview_ui').show();
        } else {
            jQuery('#remove_bk_image_btn').addClass('d-none');
            jQuery('.bk_image_filename_ui').addClass('d-none');
            jQuery('.bk_image_preview_ui').hide();
        }
    }
}

export default BackgroundCpt;