let pause_othres_conversion = true;

$(document).ready(() => {

    $('.list-files:not(.is-loading)').on('click', 'li.dir:not(.is-loaded) p', function (e) {

        if ($(e.target).is('input')) return;
        $('.list-files').addClass('is-loading');
        $(this).addClass('loading');
        ajaxFileManager($(this).parent());

    });

    $('.list-files:not(.is-loading)').on('click', 'li.dir.is-loaded > p', function (e) {

        if ($(e.target).is('input')) return;
        $(this).parent().toggleClass(['is-open', 'is-closed']);
        toggleState($(this).find('.state'), $(this).parent().hasClass('is-open'));

    });

    $('.list-files').on('change', 'input[type="checkbox"][name="others_item"]', function () {

        if ($(this).prop('checked')) {

            $('.btn-item-start-others').attr('disabled', false);

        } else {

            $('.btn-item-start-others').attr('disabled', $('input[name="others_item"]:checked:not(:disabled)').length ? false : true);
            
        }

        const li = $(this).closest('li');
        
        if (li.length && li.hasClass('dir')) {

            li.find('input:not(:disabled)').prop('checked', $(this).prop('checked'));

        } 

    });

    $('.btn-item-start-others').on('click',function(){

        actionStartConversion();

        let items = [];

        $('.list-files').find('input[name="others_item"]:checked:not(:disabled)').each(function(){
            items.push($(this).val())
        });

        ajaxGenerateOthersItem(items)

    });

    $('.btn-item-pause-others').on('click', function () {

        actionPauseConversion();

    });

    $('.btn-item-refresh-others').on('click', function(){

        $.ajax({
            url: x13webp_refresh_others_url,
            method: 'POST',
        }).done((resp) => {

            if(resp.length){

                const content = JSON.parse(resp);

                if(content.error){

                    alert(content.error);
                    actionPauseConversion();

                } else if(content.items.length){

                    resetProgressItem();
                    actionStartConversion();
                    
                    $(content.items).each(function(){
                        const input = getInputByValue(this)

                        if (input.length) input.attr('disabled', false);

                    });

                    ajaxGenerateOthersItem(content.items);

                } else {

                    alert(x13webp_unexpected_error);

                }


            }

        });

    });

});

const getInputByValue = (val) => {
    return $('.list-files input[value="' + val + '"]');
}

const resetProgressItem = () => {

    const progress_bar = $('#tab-x13wepb-others').find('.progress-bar');
    progress_bar.attr('aria-valuenow', 0);
    const totals = $('#tab-x13wepb-others').find('.images-done-total');
    totals.find('.done').text(0);
    progress_bar.parent().removeClass('is-done')
    progress_bar.find('.progressbar-inner').text(`0%`);
    progress_bar.css('width', '0%');

}

const actionStartConversion = () => {

    pause_othres_conversion = false;
    $('#form-tabs').find('li:not(.active)').tooltip('enable').find('a').addClass('disabled');
    $('.btn-item-start-others').addClass('hidden').attr('disabled', true).parent().tooltip('disable');
    $('.btn-item-refresh-others').addClass('hidden').attr('disabled', true);
    $('.btn-item-pause-others').removeClass('hidden').attr('disabled', false);

}

const actionPauseConversion = () => {

    pause_othres_conversion = true;
    $('#form-tabs').find('li:not(.active)').tooltip('disable').find('a').removeClass('disabled');
    const disable_button = $('input[name="others_item"]:checked:not(:disabled)').length ? false : true;
    $('.btn-item-start-others').removeClass('hidden').attr('disabled', disable_button).parent().tooltip(disable_button ? 'enable' : 'disable');
    $('.btn-item-refresh-others').removeClass('hidden').attr('disabled', false);
    $('.btn-item-pause-others').addClass('hidden').attr('disabled', true);

}

const ajaxGenerateOthersItem = (items) => {

    if (!pause_othres_conversion && items.length) {
    
        $.ajax({
            url: x13webp_generate_others_item_url,
            method: 'POST',
            data: {
                item: items[0]
            }
        }).done((resp) => {
    
            if(resp.length){
                const output = JSON.parse(resp);
                if(output && !output.error){

                    if (output.dir) {

                        if(output.complete){
                            
                            const input = getInputByValue(items[0]);
                            if (input.length) input.attr('disabled', true).parent().addClass('disabled');
                            items.splice(0, 1);

                        } else {

                            const input = getInputByValue(output.image);
                            if (input.length) input.attr('disabled', true).parent().addClass('disabled');

                            const index = items.indexOf(output.image);
                            if (index !== -1) {
                                items.splice(index, 1);
                            }

                        }

                    } else {

                        const input = getInputByValue(items[0]);
                        if (input.length) input.attr('disabled', true).parent().addClass('disabled');
        
                        items.splice(0, 1);

                    }

                    const done = $('#tab-x13wepb-others').find('.images-done-total .done').text();
                    if(!output.complete){
                        addOthersLog(`<p class="log-li ${output.warning ? 'has-warning' : ''}">${output.object_name} <strong>#${parseInt(done) + 1}</strong>: <span class="log-format">WebP [${output.image}]</span> <span class="log log-${output.success ? 'success' : 'danger'}">${output.warning ? output.warning : x13webp_success_alert}</span></p>`, output.warning);
                    }

                    increaseProgressItem()

                    if (items.length) {
                        ajaxGenerateOthersItem(items)
                    } else {
                        actionPauseConversion()
                    }

                    if ($('#x13webp-delete-all-webp').hasClass('hidden')) {

                        $('#x13webp-delete-all-webp').removeClass('hidden').siblings('.help-block').addClass('hidden');

                    }

                } else {
                    actionPauseConversion()
                    addOthersLog(`<p class="log-li"><span class="log log-danger">${output.error}</span></p>`, true);
                }
            } else {
                actionPauseConversion()
                addOthersLog(`<p class="log-li"><span class="log log-danger">${x13webp_unexpected_error}</span></p>`, true);
            }

            

        });

    }

}

const addOthersLog = (log, warning = false) => {

    if ($('.x13webp-log-info').parent().hasClass('hidden')) $('.x13webp-log-info').parent().removeClass('hidden')
    if (log) $('.x13webp-log-info').prepend(log);
    if (warning && $('#x13webp-log-warning').hasClass('hidden')) $('#x13webp-log-warning').removeClass('hidden');

}

const increaseProgressItem = () => {

    const progress_bar = $('#tab-x13wepb-others').find('.progress-bar');
    progress_bar.attr('aria-valuenow', parseInt(progress_bar.attr('aria-valuenow')) + 1);
    const percent = parseFloat(progress_bar.attr('aria-valuenow') * 100 / progress_bar.attr('aria-valuemax')).toFixed(2);

    const totals = $('#tab-x13wepb-others').find('.images-done-total');

    totals.find('.done').text(progress_bar.attr('aria-valuenow'));

    if (totals.find('.total').text() == totals.find('.done').text() && !progress_bar.parent().hasClass('is-done')) {

        progress_bar.parent().addClass('is-done')

    }
    progress_bar.find('.progressbar-inner').text(`${percent}%`);
    progress_bar.css('width', percent + '%');

}

const toggleState = (state, open) => $(state).find('i').toggleClass('icon-folder').toggleClass('icon-folder-open');

const ajaxFileManager = (li) => {

    li.addClass(['is-open', 'is-loaded']);

    $.ajax({
        url: x13webp_file_manager_url,
        method: 'POST',
        data: {
            file: li.data('file')
        }
    }).done((resp) => {

        if (resp.length) {

            const content = JSON.parse(resp);

            if (content.error) {

                alert(content.error);

            } else if (content.tree.length) {

                toggleState(li.find('.state'), false);

                let ul = '<ul>';

                $(content.tree).each(function(){
                    ul += `<li data-file="${li.data('file')}/${this.name}" ${this.type == 'dir' ? 'class="dir"' : ''}>`;
                    ul += `<p ${this.exists && this.type == 'dir' ? 'data-toggle="tooltip" title="'+x13webp_empty_folder+'"' : ''}>`;
                    
                    if(this.type == 'dir'){
                        ul += `<span class="state"><i class="icon-folder"></i></span>`;
                    }
                    if (li.find('p input').prop('checked') && $('.btn-item-start-others').attr('disabled') == true) {
                        $('.btn-item-start-others').attr('disabled', false);
                    }
                    const props = this.exists ?
                        this.type == 'dir' ?
                            'disabled' :
                            'checked disabled':
                                li.find('p input').prop('checked') ?
                                    'checked' :
                                    '';

                    ul += `<input type="checkbox" name="others_item" value="${li.data('file')}/${this.name}" ${props}>`;
                    ul += this.name;
                    ul += `</p>`;
                    ul += `</li>`;
                                
                })

                ul += '</ul>';

                li.append(ul);

                li.find('.dir p').tooltip('enable');

                $('.list-files').removeClass('is-loading');

            } else {

                li.append('<ul class="empty"><li>..</li></ul>');

            }

        }
        
        li.find('.loading').removeClass('loading');
    });

}