import { athenaConfigOptions, athenaConfig } from '../../global/athena-config.js';
import { handleHtml } from '../../global/helpers/athena-global-helper.js';
import handleEditButton from './handle-edit-visual-similarity-search.js';
import PerformQuery from '../../global/indexed-db/indexed-queries.js';
import { addCloseButton } from '../../autocomplete/autocomplete.js';


/**
 * Search Results for Visual Similarity
 */
async function searchResultsForVisualSimilarity() {
    const searchTitle = document.querySelector('.search-title');
    const urlSearchParams = new URLSearchParams(window.location.search);
    const imageId = urlSearchParams.get('image');
    const sidebarImage = document.querySelector('.athena-sidebar')

    if(imageId) {
        let imageSrc = (await PerformQuery.get(`${imageId}`))?.image;

        imageSrc = `data:image/jpeg;base64,${imageSrc}`;
        const imageSrcOriginal = (await PerformQuery.get('original-image-vss'))?.image;

        sidebarImage.append(
            handleHtml(`
                  <span class="search-title-result">
                       <img src="${imageSrc}" alt="searched-image" style="margin-top: 20px; width: 100%;"/>
                       <button type="button" class="edit-button__visual-similarity-search">EDIT IMAGE</button>
                  </span>
            `, `.search-title-result`)
        );

        handleEditButton(
            imageSrcOriginal ?
                imageSrcOriginal :
                imageSrc
        );

        searchTitle?.classList.add('athena-visibility-hidden');
    }
}

/**
 * Append Search title
 *
 * @param title
 * @param showResult
 */
function appendSearchTitleResult(title, showResult) {
    if(showResult) {

        if(title === 'image') {
            athenaConfigOptions.searchTitle.append(
                handleHtml(`
                  <span class="search-title-result" style="visibility: hidden"></span>
            `, `.search-title-result`)
            );
        } else {
            if(!title && typeof title === 'undefined') {
                athenaConfigOptions.searchTitle ? athenaConfigOptions.searchTitle.style.display = 'none' : '';
            } else {
                athenaConfigOptions.searchTitle ? athenaConfigOptions.searchTitle.style.display = 'flex' : '';
            }

            athenaConfigOptions.searchTitle.append(
                handleHtml(`
                    <div class="search-title-container">
                        ${title.length > 50 ? 
                            `<div class="tooltip-container">
                                <span> ${title ? (title.length > 50 ? `${title.slice(0, 50)}..` : title) : ''} </span>
                                <div class="tooltip-text">
                                    <div class="search-icon-grey"></div> 
                                    ${title}
                                </div>
                            </div>` : 
                            `<span> ${title ? (title.length > 50 ? `${title.slice(0, 50)}..` : title) : ''} </span>`
                        }

                        <div class="search-title__button-container">
                            <div class="tooltip-container tooltip-right-container">
                                <button 
                                    class="search-title-result-button"
                                    type="button"
                                >
                                    <div class="athena-search-results-icon"></div> 
                                </button>
                                <div class="tooltip-text">
                                    Reuse the query. Continue the query or edit it.
                                </div>
                            </div>
                            
                             <div class="tooltip-container tooltip-right-container">
                                <button 
                                    type="button" 
                                    class="continuous-voice-search" 
                                    id="continuous-voice-search"
                                    data-original-title="${title ? title : ''}"
                                    data-should-prepend-search-results="true"
                                >
                                     <div class="continuous-voice-icon"></div> 
                                </button>
                                <div class="tooltip-text">
                                    Continue your query by voice.
                                </div>
                            </div>
                        </div>
                    </div>
            `, `.search-title-container`)
            );
        }

        athenaConfigOptions.searchTitle?.classList.remove('hide-title');

        //Adding button for click on search term
        document.querySelector('.search-title-result-button')?.addEventListener('click', () => {
            const search = document.querySelector('#search');
            if(search) {
                search.value = `${title} `;
                search.focus();
                athenaConfig.sendAthenaRequest = true;

                addCloseButton();
            }
        });

        athenaConfigOptions.voiceRecognition?.addVoiceRecognitionListener('#continuous-voice-search');
    }

    let filterOpenerContainer = document.querySelector('.filter-opener-container');
    filterOpenerContainer?.classList.remove('hide-icon');

    let filterOpener = document.querySelector('.filter-opener');
    filterOpener.addEventListener('click', () => {
        document.getElementsByTagName('body')[0]?.classList.toggle('athena-search-filter-open');
    });

    document.getElementsByTagName('body')[0].append(
        handleHtml(`
                  <span class="filter-mask"></span>
            `, `.filter-mask`)
    );


}


//Exporting all Functions
export {
    appendSearchTitleResult,
    searchResultsForVisualSimilarity
}