import category from '../category/get-category-event.js';
import {athenaConfigOptions} from '../global/athena-config.js';
import {hideAutocompleteBox} from '../autocomplete/helper/ajax-helper.js';
import {handleHtml, hideVisualSimilarityBox} from '../global/helpers/athena-global-helper.js';
import {athenaFetchApi} from '../global/athena-fetch-api.js';

export default function(){

    const athenaCategoryMenuBtn = document.querySelector('.category-navigation-btn');
    const athenaCategoryMenuContainer = document.querySelector('.category-navigation-container');
    const athenaHeaderCategoryMenuContainer = document.querySelector('.header-menu-list');
    athenaCategoryMenuBtn?.addEventListener('click', function(){
        resetAllSetings();
    });

    renderCategoryMenu(athenaCategoryMenuContainer, athenaHeaderCategoryMenuContainer);
    expandCategoryMenu();

    document.addEventListener('click', function (event){
        if(event.target.classList.contains('category-name')){
            let categoryId = event.target.getAttribute('data-category-popup-id');
            let categoryLevel = event.target.getAttribute('data-category-popup-level');

            category(categoryId, categoryLevel, true);
        }

        if(event.target.classList.contains('category-header-menu-link')){
            event.preventDefault();
            let categoryId = event.target.getAttribute('data-category-popup-id');
            let categoryLevel = event.target.getAttribute('data-category-popup-level');

            category(categoryId, categoryLevel, true);
        }

    });

}


function resetAllSetings(){
    const athenaCategoryMenuContainer = document.querySelector('.category-navigation-container');
    const categoryNavigationBtn  = document.querySelector('.category-navigation-btn');
    const backgroundOverlay = document.querySelector('.overlay-background');


    if(!athenaCategoryMenuContainer?.classList.contains('active-category-navigation-container')){
        athenaCategoryMenuContainer?.classList.add('active-category-navigation-container');
        categoryNavigationBtn?.classList.add('active-category-navigation-btn');
        setTimeout(() => {
            backgroundOverlay?.classList.add('background-overlay');
        }, 20);
    }else{
        athenaCategoryMenuContainer?.classList.remove('active-category-navigation-container');
        categoryNavigationBtn?.classList.remove('active-category-navigation-btn');
        setTimeout(() => {
            backgroundOverlay?.classList.remove('background-overlay');
        }, 20);
    }

    document.body.classList.remove('athena-disable-scroll');
    athenaConfigOptions.voiceRecognition?.disable();
    hideAutocompleteBox();
    hideVisualSimilarityBox();
    document.dispatchEvent(athenaConfigOptions.cameraCloseEvent);
    document.querySelector('.athena-mobile-close-button')?.classList.remove('active-mobile-close');
}


function renderCategoryMenu(athenaCategoryMenuContainer, athenaHeaderCategoryMenuContainer){
    athenaFetchApi({
        'service': 'get-category-tree'
    }).then(response => {

        if(response.data.length){
            response.data.forEach(function (element) {

                athenaCategoryMenuContainer.append(
                    handleHtml(`
                    <div class="category-level-first category-level-menu">
                        <span class="category-name" data-category-popup-level="${element.level}" data-category-popup-id="${element.entity_id}">${element.name}</span>
                        ${element.has_children ? `<span class="category-item-arrow"></span>`: ''}
                        <div class="category-level-first-inner-links">
                        ${element.child_categories.map(childCategorySecond => `<div class="category-level-second category-level-menu">
                                                                                    <span class="category-name" data-category-popup-level="${childCategorySecond.level}" data-category-popup-id="${childCategorySecond.entity_id}">${childCategorySecond?.name}</span>  
                                                                                    ${childCategorySecond.has_children ? `<span class="category-item-arrow"></span>`: ''} <div class="category-level-second-inner-links">            
                         ${childCategorySecond.child_categories.map(childCategoryThird => `<div class="category-level-third category-level-menu">
                                                                                                <span class="category-name" data-category-popup-level="${childCategoryThird.level}" data-category-popup-id="${childCategoryThird.entity_id}">${childCategoryThird?.name}</span>
                                                                                                ${childCategoryThird.has_children ? `<span class="category-item-arrow"></span>`: ''}
                                                                                                <div class="category-level-third-inner-links">
                                        ${childCategoryThird.child_categories.map(childCategoryFourth => `<div class="category-level-fourth category-level-menu">
                                                                                                                <span class="category-name" data-category-popup-level="${childCategoryFourth.level}" data-category-popup-id="${childCategoryFourth.entity_id}">${childCategoryFourth?.name}</span>
                                                                                                            </div>`).join("")}
                                                                                            </div></div>`).join("")}         
                                                                                </div></div>`).join("")}
                    </div></div>
                `, '.category-level-first')
                );

            });

            if(athenaHeaderCategoryMenuContainer){
                response.data.forEach(function (element) {
                    athenaHeaderCategoryMenuContainer.append(
                        handleHtml(`<li class="category-header-menu-item">
                            <a class="category-header-menu-link" data-category-popup-level="${element.level}" data-category-popup-id="${element.entity_id}" href="${element.url}" >${element.name}</a>
                        </li>
                    `, '.category-header-menu-item')
                    );
                });
            }
        }

    });
}

function expandCategoryMenu(){
    document.addEventListener('click', function(event){
        if(event.target.classList.contains('category-item-arrow')){
            document.querySelector('.category-navigation-container').scrollTop = 0;
            event.target.closest('.category-level-menu').scrollTop = 0;
            event.target.closest('.category-level-menu').classList.toggle('sub-category-menu-open');


            let currentActiveItem = document.querySelectorAll('.current-active-menu')
            if(currentActiveItem.length){
                currentActiveItem.forEach(function(element){
                    element.scrollTop = 0;
                    element.classList.remove('current-active-menu');
                });
            }

            if(event.target.parentElement?.classList.contains('sub-category-menu-open')){
                event.target.parentElement?.classList.toggle('current-active-menu');
            }else{
                event.target.closest('.sub-category-menu-open')?.classList.toggle('current-active-menu');
            }

            let categoryLevelMenu = document.querySelectorAll('.current-active-menu');
            if(categoryLevelMenu.length){
                document.querySelector('.category-navigation-container')?.classList.add('overflow-menu');
            }else{
                document.querySelector('.category-navigation-container')?.classList.remove('overflow-menu');
            }

        }
    });
}