import { athenaConfig } from '../../../global/athena-config.js';
import { hideAutocompleteBox } from '../../helper/ajax-helper.js';

import {
    hideCategoryMenu,
    hideVisualSimilarityBox,
    getLazyElements,
    handleHtml
} from '../../../global/helpers/athena-global-helper.js';

const getVoiceRecognitionElements = (
    queryElement = null
) => {
    const selectors = {
        voiceAutocompleteElement: '.audio-search',
        backgroundOverlayElement: '.overlay-background',
        audioBarElement: '.audio-bar',
        productInfoSidebarLandingElement: '.product-sidebar',
        productInfoAutocompleteElement: '.product-autocomplete',
        athenaMobileCloseElement: '.mobile-close',
        continuousVoiceSearch: '#continuous-voice-search',
        errorMessageContainerElement: '.audio-search_inner-bottom-container',
        startElement: '#startButton',
        stopElement: '#stopButton',
        searchInput: '#search',
        textBottom: '.audio-search-text-bottom'
    };

    return getLazyElements(queryElement, selectors);
};

const showMicrophoneIcon = () =>
{
    const microphoneContainer = document.querySelector('.microphone-container');
    microphoneContainer?.classList.replace('athena-helper-hide', 'athena-helper-show');
};

const startVoiceRecognitionAnimation = () =>
{
    const { audioBarElement, textBottom } = getVoiceRecognitionElements(['audioBarElement', 'textBottom']);
    textBottom.innerText = 'Please wait loading...';

    setTimeout(() => {
        audioBarElement?.classList.add('active-audio-bar');
        textBottom.innerText = 'Listening to you carefully...';
    }, 1000);
};

const stopVoiceRecognitionAnimation = () =>
{
    const { audioBarElement } = getVoiceRecognitionElements(['audioBarElement']);
    audioBarElement?.classList.remove('active-audio-bar');
};

const openVoiceRecognitionAutocomplete = () =>
{
    if(!athenaConfig.voiceSearchStatus)
        return;

    const {
        productInfoSidebarLandingElement,
        productInfoAutocompleteElement,
        athenaMobileCloseElement,
        voiceAutocompleteElement,
        backgroundOverlayElement,
        startElement,
        stopElement
    } = getVoiceRecognitionElements(
        [
            'productInfoSidebarLandingElement',
            'productInfoAutocompleteElement',
            'athenaMobileCloseElement',
            'voiceAutocompleteElement',
            'backgroundOverlayElement',
            'startElement',
            'stopElement'
        ]
    );

    productInfoSidebarLandingElement?.classList.remove('product-info-sidebar-active');
    productInfoAutocompleteElement?.classList.remove('product-info-sidebar-autocomplete-active');
    athenaMobileCloseElement?.classList.add('active-mobile-close');

    hideAutocompleteBox();
    hideVisualSimilarityBox();
    hideCategoryMenu();

    if(!voiceAutocompleteElement)
        return;

    voiceAutocompleteElement.style.display = 'flex';

    if(voiceAutocompleteElement.style.display === 'flex') {
        backgroundOverlayElement?.classList.add('background-overlay');

        startElement?.classList.remove('athena-voice-search__active-button');
        startElement?.classList.add('athena-voice-search__inactive-button');

        stopElement?.classList.remove('athena-voice-search__inactive-button');
        stopElement?.classList.add('athena-voice-search__active-button');
    }
};

const closeVoiceRecognitionAutocomplete = () =>
{
    if(!athenaConfig.voiceSearchStatus)
        return;

    const {
        voiceAutocompleteElement,
        backgroundOverlayElement,
        startElement,
        stopElement
    } = getVoiceRecognitionElements(
        [
            'voiceAutocompleteElement',
            'backgroundOverlayElement',
            'startElement',
            'stopElement'
        ]
    );

    if(voiceAutocompleteElement)
        voiceAutocompleteElement.style.display = 'none';

    if(backgroundOverlayElement?.classList.contains('background-overlay'))
        backgroundOverlayElement?.classList.remove('background-overlay');

    stopElement?.classList.remove('athena-voice-search__active-button');
    stopElement?.classList.add('athena-voice-search__inactive-button');

    startElement?.classList.remove('athena-voice-search__inactive-button');
    startElement?.classList.add('athena-voice-search__active-button');
};

const showErrorMessage = (
    errorMessage = null
) =>
{
    const { errorMessageContainerElement } = getVoiceRecognitionElements(['errorMessageContainerElement']);

    errorMessageContainerElement?.append(
        handleHtml(
            `<p class="audio-search-text-bottom__error">${errorMessage}</p>`,
            '.audio-search-text-bottom__error'
        )
    );

    setTimeout(() => {
        errorMessageContainerElement?.querySelector('.audio-search-text-bottom__error')?.remove();
    }, 5000);
};

const getSearchResultText = () =>
{
    const { continuousVoiceSearch } = getVoiceRecognitionElements(['continuousVoiceSearch']);
    return continuousVoiceSearch?.getAttribute('data-original-title') || '';
};

const getStopElement = () =>
{
    const { stopElement } = getVoiceRecognitionElements(['stopElement']);
    return stopElement || null;
};

const appendQueryToSearchInput = (
    transcript
) =>
{
    const { searchInput } = getVoiceRecognitionElements(['searchInput']);
    if(searchInput) searchInput.value = transcript.toLowerCase();
};

export {
    showErrorMessage,
    showMicrophoneIcon,
    openVoiceRecognitionAutocomplete,
    closeVoiceRecognitionAutocomplete,
    startVoiceRecognitionAnimation,
    stopVoiceRecognitionAnimation,
    getSearchResultText,
    getStopElement,
    appendQueryToSearchInput
}