import { handleHtml } from '../../global/helpers/athena-global-helper.js';

/**
 * Handle Function for Layout Three for Mobile View
 *
 * @param activeFiltersArray
 */
export function handleMobileLayoutThree(activeFiltersArray) {

    const athenaFlex = document.querySelector('.athena-autocomplete__flex-container');
    const buttonsContainer = document.querySelector('#autocomplete-l3__mobile-buttons-container');

    //Checking if we are on first click or autocomplete
    const children = Object.keys(athenaFlex.children).map((key) => [athenaFlex.children[key]]);
    const autocompleteCheck = children.filter(child => child[0]?.classList.contains('autocomplete-l3__flex-container')).length > 0;

    if(!buttonsContainer && autocompleteCheck) {
        const rightSidebar = document.querySelector('.autocomplete-l3__right_sidebar');
        const checkRightSection = rightSidebar ? rightSidebar.style.display !== 'none' : false;

        athenaFlex.prepend(
            handleHtml(`
                <div id="autocomplete-l3__mobile-buttons-container" class="autocomplete-l3__mobile-buttons-container">
                    <button type="button" id="autocomplete-l3__mobile-filters-button" class="mobile-filters-button">Filters</button>
                    ${checkRightSection ?
                        `<button type="button" id="autocomplete-l3__mobile-sections-button" class="mobile-filters-button">Sections</button>`
                    : ''}
                </div>
            `, '#autocomplete-l3__mobile-buttons-container')
        );

        const filtersButton = document.querySelector('#autocomplete-l3__mobile-filters-button');
        const sectionsButton = document.querySelector('#autocomplete-l3__mobile-sections-button');

        const filtersSidebarContainer = document.querySelector('.autocomplete-l3__left_sidebar');
        const sectionsSidebarContainer = document.querySelector('.autocomplete-l3__right_sidebar')
        const contentContainer = document.querySelector('.autocomplete-l3__content');

        filtersButton.addEventListener('click', () => {
            handleToggleSidebarMobile(
                contentContainer,
                filtersSidebarContainer,
                sectionsSidebarContainer,
                'filters',
                checkRightSection
            );

            handleClickGoBackButtonMobile(
                '#autocomplete_l3__go_back_filters',
                filtersSidebarContainer,
                'filters',
                checkRightSection
            );
        });

        if(sectionsButton) {
            sectionsButton.addEventListener('click', () => {
                handleToggleSidebarMobile(
                    contentContainer,
                    filtersSidebarContainer,
                    sectionsSidebarContainer,
                    'sections'
                );

                handleClickGoBackButtonMobile(
                    '#autocomplete_l3__go_back_sections',
                    sectionsSidebarContainer,
                    'sections'
                );
            });
        }

        if(activeFiltersArray) {
            handleToggleSidebarMobile(
                contentContainer,
                filtersSidebarContainer,
                sectionsSidebarContainer,
                'filters'
            );

            handleClickGoBackButtonMobile(
                '#autocomplete_l3__go_back_filters',
                filtersSidebarContainer,
                'filters'
            );
        }
    }
}

/**
 * Handle Back Button Mobile Layout Three
 *
 * @param query
 * @param container
 * @param type
 * @param checkRightSection
 */
function handleClickGoBackButtonMobile(
    query,
    container,
    type,
    checkRightSection = true
) {
    const backButtonCheck = !!document.querySelector(`${query}`);
    if(!backButtonCheck) {

        container.prepend(
            handleHtml(`
                <div class="autocomplete_l3_go_back_container">
                    <button type="button" class="autocomplete_l3__go_back_button" id="autocomplete_l3__go_back_${type}">go back</button>
                </div>
            `, '.autocomplete_l3_go_back_container')
        );

        const backButton = document.querySelector(`#autocomplete_l3__go_back_${type}`);
        backButton.addEventListener('click', () => {
            const filtersSidebarContainer = document.querySelector('.autocomplete-l3__left_sidebar');
            const sectionsSidebarContainer = document.querySelector('.autocomplete-l3__right_sidebar')
            const contentContainer = document.querySelector('.autocomplete-l3__content');
            const mobileFiltersButton = document.querySelector('#autocomplete-l3__mobile-filters-button');
            const mobileSectionsButton = document.querySelector('#autocomplete-l3__mobile-sections-button');


            if(filtersSidebarContainer?.classList.contains('autocomplete-l3__show')) {
                filtersSidebarContainer?.classList.remove('autocomplete-l3__show');
                filtersSidebarContainer?.classList.add('autocomplete-l3__hide_left');
            }

            if(sectionsSidebarContainer?.classList.contains('autocomplete-l3__show') && checkRightSection) {
                sectionsSidebarContainer?.classList.remove('autocomplete-l3__show');
                sectionsSidebarContainer?.classList.add('autocomplete-l3__hide_right');
            }

            filtersSidebarContainer?.classList.add('autocomplete-l3__hide_left');
            checkRightSection && sectionsSidebarContainer ? sectionsSidebarContainer?.classList.add('autocomplete-l3__hide_right') : '';
            contentContainer?.classList.remove('autocomplete-l3__hide');
            mobileFiltersButton?.classList.remove('disabled');
            checkRightSection && mobileSectionsButton ? mobileSectionsButton?.classList.remove('disabled') : '';
            mobileFiltersButton.disabled = false;
            checkRightSection && mobileSectionsButton ? mobileSectionsButton.disabled = false : '';
        });
    }
}

/**
 * Handle Toggle Sidebar for Mobile View
 *
 * @param content
 * @param filters
 * @param sections
 * @param type
 * @param checkRightSection
 */
function handleToggleSidebarMobile(
    content,
    filters,
    sections,
    type,
    checkRightSection = true
) {
    const mobileFiltersButton = document.querySelector('#autocomplete-l3__mobile-filters-button');
    const mobileSectionsButton = document.querySelector('#autocomplete-l3__mobile-sections-button');

    if(type === 'filters') {
        content?.classList.remove('autocomplete-l3__hide');
        filters?.classList.remove('autocomplete-l3__hide_left');
        checkRightSection ? sections?.classList.remove('autocomplete-l3__show') : '';

        content.classList.add('autocomplete-l3__hide');
        checkRightSection ? sections?.classList.add('autocomplete-l3__hide_right') : '';
        filters?.classList.add('autocomplete-l3__show');

        checkRightSection && mobileSectionsButton ? mobileSectionsButton?.classList.remove('disabled') : '';
        checkRightSection && mobileSectionsButton ? mobileSectionsButton.disabled = false : '';
        mobileFiltersButton?.classList.add('disabled');
        mobileFiltersButton.disabled = true;
    }

    if(type === 'sections') {
        content?.classList.remove('autocomplete-l3__hide');
        sections?.classList.remove('autocomplete-l3__hide_right');
        filters?.classList.remove('autocomplete-l3__show');

        content?.classList.add('autocomplete-l3__hide');
        filters?.classList.add('autocomplete-l3__hide_left');
        sections?.classList.add('autocomplete-l3__show');

        mobileFiltersButton?.classList.remove('disabled');
        mobileFiltersButton.disabled = false;
        mobileSectionsButton?.classList.add('disabled');
        mobileSectionsButton.disabled = true;
    }
}


