'use strict';
(function ($) {


    $.fn.wowpMenuLiveBuilder = function () {

        let liveBuilder = $('#live-builder');
        const box = $('#live-builder .fleximenu-box');
        let menu = $('#live-builder .fleximenu');
        menu.empty();

        let builderMenu = '';

        this.each(function (index, element) {

            buildLivePreview(index, element);
            buildItem(index, element);
        });

        function buildLivePreview(index, element) {
            const item = buildLiLivePreview(index, element);
            builderMenu += item;
        }

        $(menu).append(builderMenu);

        function buildLiLivePreview(index, element) {
            const item = buildLiveItem(index, element);
            const sub = parseInt($(element).find('.wpie-item__parent').val());
            const nextEl = $(element).next();
            let nextElSub = 0
            if (nextEl) {
                nextElSub = parseInt($(nextEl).find('.wpie-item__parent').val());
            }

            if ((sub === 0 && nextElSub === 1) || (sub === 1 && nextElSub === 2)) {

                return `<li class="fleximenu-item fleximenu-item--has-sub">
                    ${item}
                    <ul class="fleximenu-sub">
                `;

            }

            if ((sub === 1 && nextElSub === 0) || (sub === 2 && nextElSub === 1)) {

                return `<li class="fleximenu-item">
                    ${item}</li>
                    </ul></li>
                `;
            }

            if (sub === 2 && nextElSub === 0) {
                return `<li class="fleximenu-item">
                    ${item}</li>
                    </ul></li></ul>
                `;
            }

            return `<li class="fleximenu-item">${item}</li>`;

        }

        function buildLiveItem(index, element) {
            const icon = getIcon(element);
            const label = getLabel(element);

            const item = `
                <a href="#" class="fleximenu-link">
                    <span class="fleximenu-icon">${icon}</span>
                    <span class="fleximenu-label">${label}</span>
                </a>`;
            return item;
        }


        function getLabel(element) {
            return $(element).find('[data-field|="item-label"]').val();
        }

        function buildItem(index, element) {
            const icon = $(element).find('.wpie-item_heading_icon');
            const label = $(element).find('.wpie-item_heading_label');
            const type = $(element).find('.wpie-item_heading_type');
            const sub = $(element).find('.wpie-item__parent');

            if ($(element).hasClass('shifted-right')) {
                sub.val(1);
            } else if ($(element).hasClass('shifted-further')) {
                sub.val(2);
            } else {
                sub.val(0);
            }

            const labelText = $(element).find('[data-field|="item-label"]').val();
            const typeText = $(element).find('[data-field="item-type"] option:selected').text();

            const iconValue = getIcon(element);

            label.text(labelText);
            icon.html(iconValue);
            type.text(typeText);
        }

        function getIcon(element) {
            const iconRotate = $(element).find('[data-field|="icon_rotate"], [data-field|="item-icon_rotate"]').val();
            const iconFlip = $(element).find('[data-field|="icon_flip"], [data-field|="item-icon_flip"]').val();
            let style = ' style="';
            if (iconRotate !== '' || iconRotate !== '0') {
                style += `rotate: ${iconRotate}deg;`;
            }

            if (iconFlip !== '') {
                if (iconFlip === '-flip-horizontal') {
                    style += `scale: -1 1;`;
                }
                if (iconFlip === '-flip-vertical') {
                    style += `scale: 1 -1;`;
                }
                if (iconFlip === '-flip-both') {
                    style += `scale: -1 -1;`;
                }
            }

            style += '"';

            const type = $(element).find('[data-field|="icon_type"], [data-field|="item-icon_type"]').val();

            if (type === 'icon') {
                let icon = $(element).find('.selected-icon').html();
                if (icon === undefined || $.trim(icon) === '<i class="fip-icon-block"></i>') {
                    icon = $(element).find('[data-field|="icon"], [data-field|="item-icon"]').val();
                    icon = `<i class="${icon}"></i>`;
                }
                icon = icon.replace('class=', style + ' class=');
                return icon;
            }

            if (type === 'image') {
                let icon = $(element).find('[data-field|="image"], [data-field|="item-image"]').val();
                return `<img src="${icon}" ${style}>`;
            }

            if (type === 'class') {
                let icon = $(element).find('[data-field|="icon_class"], [data-field|="item-icon_class"]').val();
                return `<i class="dashicons dashicons-camera-alt" ${style}></i>`;
            }

            if (type === 'emoji') {
                let icon = $(element).find('[data-field|="emoji"], [data-field|="item-emoji"]').val();
                return `<span ${style}>${icon}</span>`;
            }

            return '';
        }

    }

    $.fn.wowpMenuStyleBuilder = function () {

        let liveBuilder = $('#live-builder');
        const box = $('#live-builder .fleximenu-box');
        let menu = $('#live-builder .fleximenu');

        const menuHight = $(box).outerHeight() + 64;
        liveBuilder.height(menuHight);

        styleBuilder();

        function styleBuilder() {
            const fields = [
                'menu_bg',
                'menu_radius',
                'link_padding_block',
                'link_padding_inline',
                'link_gap',
                'link_hover_bg',
                'items_gap',
                'submenu_offset',
                'menu_padding_block',
                'menu_padding_inline',
                'menu_min_w',
                'icon_size',
                'icon_box',
                'icon_color',
                'icon_bg',
                'label_size',
                'label_padding_block',
                'label_padding_inline',
                'label_color',
                'label_weight',
                'label_style',
                'menu_offset_block',
                'menu_offset_inline',

            ];

            let style = '';

            fields.forEach(field => {
                const value = $(`[data-field="${field}"]`).val();
                if (value) {
                    style += `--flexi-${field}: ${value};`;
                }
            });

            $(box).attr('style', style);
        }

        classesBuilder();

        function classesBuilder() {

            const menuShadow = $('[data-field="menu_shadow"]');

            if ($(menuShadow).is(':checked')) {
                $(box).addClass('-shadow');
            } else {
                $(box).removeClass('-shadow');
            }

            const radius = $('[data-field="include_menu_radius"]');

            if ($(radius).is(':checked')) {
                $(box).addClass('-rounded');
            } else {
                $(box).removeClass('-rounded');
            }

            const minWidth = $('[data-field="include_menu_min_w"]');

            if ($(minWidth).is(':checked')) {
                $(box).addClass('-min-width');
            } else {
                $(box).removeClass('-min-width');
            }

            const iconShadow = $('[data-field="icon_shadow"]');

            if ($(iconShadow).is(':checked')) {
                $(box).addClass('-icon-shadow');
            } else {
                $(box).removeClass('-icon-shadow');
            }

            const menuInline = $('[data-field="menu_inline"]');

            if ($(menuInline).is(':checked')) {
                $(menu).addClass('fleximenu--inline');
            } else {
                $(menu).removeClass('fleximenu--inline');
            }

            const menuIcon = $('[data-field="menu_icon"]');

            if ($(menuIcon).is(':checked')) {
                $(menu).addClass('fleximenu--icon');
            } else {
                $(menu).removeClass('fleximenu--icon');
            }

            const menuReverse = $('[data-field="menu_reverse"]');

            if ($(menuReverse).is(':checked')) {
                $(menu).addClass('-reverse');
            } else {
                $(menu).removeClass('-reverse');
            }

        }
    }

}(jQuery));