/*!
 * Copyright 2022 youngmonkeys.org
 *
 * Licensed under the ezyplatform, Version 1.0.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
*/

(function ($) {
'use strict'

    function toggleDarkMode()  {
        var darkMode = localStorage.getItem('darkMode');
        if (darkMode == 'true') {
            $('body').addClass('dark-mode')
        } else {
            $('body').removeClass('dark-mode')
        }
    }

    function applyThemeColor(color) {
        if (color && localStorage.getItem('darkMode') != 'true') {
            $('body').attr('data-theme-color', color);
        } else {
            $('body').removeAttr('data-theme-color');
        }
    }
    ezyadmin.applyThemeColor = applyThemeColor;

    function applyFontSize(fontSize) {
        $('html').css('font-size', fontSize + '%');
    }

    function applyTableCellPadding(tableCellPadding) {
        $('html').css('--ezy-table-cell-padding', tableCellPadding + 'px');
    }

    var $sidebar = $('.control-sidebar')
    var $container = $('<div />', {
        class: 'p-3 control-sidebar-content',
        id: 'controlSidebarContent'
    })

    $sidebar.append($container)

    $container.append(
        '<h5>' + ezyadmin.messages.interface_options + '</h5><hr class="mb-2"/>'
    )

    var themeColors = ['gray', 'green', 'blue', 'red', 'orange', 'purple', 'pink'];
    var savedThemeColor = localStorage.getItem('themeColor');
    var $theme_color_container = $('<div />', {
        class: 'd-flex gap-2 mb-4 theme-color-swatch-container',
        id: 'themeColorSwatchContainer'
    })
    $('<span />', {
        class: 'theme-color-swatch theme-color-default'
            + (!savedThemeColor ? ' active' : '')
    }).on('click', function () {
        $theme_color_container.find('.theme-color-swatch').removeClass('active');
        $(this).addClass('active');
        localStorage.removeItem('themeColor');
        applyThemeColor(null);
    }).appendTo($theme_color_container);
    themeColors.forEach(function (color) {
        $('<span />', {
            class: 'theme-color-swatch theme-color-' + color
                + (color === savedThemeColor ? ' active' : '')
        }).on('click', function () {
            $theme_color_container.find('.theme-color-swatch').removeClass('active');
            $(this).addClass('active');
            localStorage.setItem('themeColor', color);
            applyThemeColor(color);
        }).appendTo($theme_color_container);
    });
    $container.append($theme_color_container);

    var savedFontSize = parseInt(localStorage.getItem('fontSize') || '100');
    if (isNaN(savedFontSize)) {
        savedFontSize = 100;
    }
    savedFontSize = Math.min(Math.max(savedFontSize, 80), 120);
    var $font_size_value = $('<span />', {
        id: 'fontSizeValue',
        text: savedFontSize + '%'
    });
    var $font_size_container = $('<div />', {
        class: 'mb-4',
        id: 'fontSizeContainer'
    });
    $font_size_container.append('<hr class="mb-2"/>');
    $('<label />', {
        class: 'd-flex justify-content-between align-items-center',
        for: 'fontSizeRange'
    }).append(
        $('<span />', {
            text: ezyadmin.messages.font_size
        }),
        $font_size_value
    ).appendTo($font_size_container);
    $('<input />', {
        class: 'custom-range font-size-range',
        id: 'fontSizeRange',
        max: 120,
        min: 80,
        step: 5,
        type: 'range',
        value: savedFontSize
    }).on('input change', function () {
        var fontSize = parseInt($(this).val());
        localStorage.setItem('fontSize', fontSize);
        $font_size_value.text(fontSize + '%');
        applyFontSize(fontSize);
    }).appendTo($font_size_container);
    $container.append($font_size_container);

    var savedTableCellPadding = parseInt(localStorage.getItem('tableCellPadding') || '12');
    if (isNaN(savedTableCellPadding)) {
        savedTableCellPadding = 12;
    }
    savedTableCellPadding = Math.min(Math.max(savedTableCellPadding, 2), 24);
    var $table_cell_padding_value = $('<span />', {
        id: 'tableCellPaddingValue',
        text: savedTableCellPadding + 'px'
    });
    var $table_cell_padding_container = $('<div />', {
        class: 'mb-4',
        id: 'tableCellPaddingContainer'
    });
    $table_cell_padding_container.append('<hr class="mb-2"/>');
    $('<label />', {
        class: 'd-flex justify-content-between align-items-center',
        for: 'tableCellPaddingRange'
    }).append(
        $('<span />', {
            text: ezyadmin.messages.table_cell_padding
        }),
        $table_cell_padding_value
    ).appendTo($table_cell_padding_container);
    $('<input />', {
        class: 'custom-range table-cell-padding-range',
        id: 'tableCellPaddingRange',
        max: 24,
        min: 2,
        step: 1,
        type: 'range',
        value: savedTableCellPadding
    }).on('input change', function () {
        var tableCellPadding = parseInt($(this).val());
        localStorage.setItem('tableCellPadding', tableCellPadding);
        $table_cell_padding_value.text(tableCellPadding + 'px');
        applyTableCellPadding(tableCellPadding);
    }).appendTo($table_cell_padding_container);
    $container.append($table_cell_padding_container);

    toggleDarkMode();
    applyThemeColor(savedThemeColor);
    applyFontSize(savedFontSize);
    applyTableCellPadding(savedTableCellPadding);
    var controlSidebarHiding = false;
    $(document).click(function(event) {
        var $target = $(event.target);
        if(!controlSidebarHiding
            && !$target.closest('.control-sidebar').length
            && !$target.hasClass('control-sidebar-toggle')
            && $('.control-sidebar').css("display") != 'none'
        ) {
            controlSidebarHiding = true;
            $('#control-sidebar-toggle-button').trigger('click');
        }
        controlSidebarHiding = false;
    });

})(jQuery)
