import './lib';
import '../app-common'
import {block, unblock} from '../utils/blockui'
import mediaLibrary from "../utils/media-library";

/**
 * 開啟媒體庫
 *
 * @param single 是否為單選模式
 * @param inputElement 自動會傳值進input元素
 * @param selectMode 是否出現選擇按鈕
 */
app.methods.media = function(single = true, inputElement = '', selectMode = true, callback = null) {
    let media = mediaLibrary({
        url: app.admin.ajax.resource.mediaFile.upload,
        translations: app.admin.translations.mediaLibrary,
        csrfToken: app.csrfToken,
        single: single,
        selectMode: selectMode,
    })

    let resizeMediaLibraryWindow = () => {
        let windowHeight = $(window).height(),
            $mediaLib = $('#media-library');
        let totalHeight = windowHeight * .98,
            rowHeadHeight = 50,
            rowFooterHeight = 40,
            padding = 15 * 2,
            rowBodyHeight = totalHeight - padding - rowHeadHeight - rowFooterHeight;
        $mediaLib.height(totalHeight);
        $mediaLib.find('.row-head').height(rowHeadHeight);
        $mediaLib.find('.row-footer').height(rowFooterHeight);
        $mediaLib.find('.row-body').height(rowBodyHeight);
        $mediaLib.find('.tab-page, .category-list, .media-info-wrapper').height(rowBodyHeight);
        $mediaLib.find('.col-media-info').css('marginTop', this.matchMediaInPx(768) ? 0 : rowHeadHeight);
        media.$emit('resize', windowHeight, $(window).width())
    }

    $(window).on('resize', resizeMediaLibraryWindow);
    resizeMediaLibraryWindow();

    let closeMediaLibrary = () => {
        $('#media-library').remove();
        unblock();
        $(window).off('resize', resizeMediaLibraryWindow);
    }

    if(callback) {
        media.$on('media_selected', function(data){
            callback(data);
        })
    }

    if(inputElement) {
        media.$on('media_selected', function(data){
            if(typeof inputElement == 'string') {
                document.querySelectorAll(inputElement).forEach(function(element, index){
                    element.value = data.idString;
                });
            } else if(inputElement instanceof HTMLElement) {
                inputElement.value = data.idString;
            }
        });
    }

    media.$on('close', closeMediaLibrary);

    block(media.$el, {
        blockMsgClass: 'media-library',
        onUnblock: function(){
            closeMediaLibrary()
        }
    })

    let $dropzone = $(media.$children[0].$refs.uploadZone).dropzone({
        paramName: 'media_file',
        url: app.admin.ajax.resource.mediaFile.upload,
        headers: {
            'X-CSRF-TOKEN': app.csrfToken
        },
        sending: function(file, xhr, formData){
            formData.append('category', media.d.currentCategory);
        },
        success:function(response){
            let responseBody = JSON.parse(response.xhr.response);
            if(responseBody.category == media.d.currentCategory) {
                media.d.medias.unshift(responseBody.media)
            }
            if(responseBody.category == 'all') {
                media.$children[0].addCategoryCount('uncategorized', 1);
            } else {
                media.$children[0].addCategoryCount(responseBody.category, 1);
            }
        }
    });

    media.$on('remove_all_uploaded_files', function(){
        $dropzone.get(0).dropzone.removeAllFiles();
    });

    return media;
}


$(() => {
    $('#app-header .medialibrary').on('click', function(){
        app.adminMediaLibrary = app.methods.media(false, null, false);
    });

    $('.media-selection-field .select-media').on('click', e => {
        e.preventDefault()
        let $this = $(e.currentTarget),
            $wrapper = $this.closest('.media-selection-field'),
            $input = $wrapper.find('input'),
            $preview = $wrapper.find('.preview'),
            $clearButton = $wrapper.find('.clear-media')

        app.methods.media(true, $input.get(0), true, (data) => {
            let media = data.medias[0]
            $preview.empty().append(
                $('<img>').attr('src', media.url)
            )
            $clearButton.show()
        })
    })

    $('.media-selection-field .clear-media').on('click', e => {
        e.preventDefault()
        let $this = $(e.currentTarget),
            $wrapper = $this.closest('.media-selection-field'),
            $input = $wrapper.find('input'),
            $preview = $wrapper.find('.preview')

        $input.val(null)
        $preview.empty()
        $this.hide()
    })
})