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

const searchFilterObject = {
    singleFilterClasses: [],
    searchFilterClasses: ''
}

function populateSearchArray(filterElement)
{
    const searchArray = [];

    if(!filterElement) {
        return searchArray;
    }

    searchFilterObject.singleFilterClasses.forEach(singleFilterClass => {
        const filterSpans = filterElement.querySelectorAll(`${singleFilterClass}`);

        filterSpans.forEach(span => {
            searchArray.push(span.innerHTML.toLowerCase().trim());
        });
    });

    return searchArray;
}

function filterArray(
    query,
    array
)
{
    return array.filter(element => {
        return element.toLowerCase().includes(query.toLowerCase());
    });
}

function renderSearchInput(
    filterElement,
    filterType,
    title
)
{
    filterElement?.prepend(handleHtml(`
        <div class="athena-search__filter-container">
            <input 
                placeholder="Search... ${title}" 
                type="text" 
                id="search-element-${filterType}"
                class="athena-input-element-filters"
            />
            <div class="athena-filter__search-icon"></div>
        </div>
    `, '.athena-search__filter-container'));

    filterElement?.append(handleHtml(`
        <div class="athena-search__filter-no-data" style="display: none;">
            No filters found!
        </div>
    `, '.athena-search__filter-no-data'));

    const searchArray = populateSearchArray(filterElement);

    const searchElement = filterElement?.querySelector('.athena-input-element-filters');
    handleSearchFunctionality(
        searchElement ?
            searchElement :
            null,
        searchArray,
        filterElement
    );
}

function handleSearchFunctionality(
    searchElement,
    searchArray,
    filterElement
)
{
    searchElement?.addEventListener('input', (event) => {
        const query = event.target?.value;
        const filteredArray = filterArray(query, searchArray);
        const searchElements = filterElement.querySelectorAll(`${searchFilterObject.searchFilterClass}`);
        const noDataElement = filterElement.querySelector('.athena-search__filter-no-data');

        if(query){
            event.target?.parentElement?.nextElementSibling?.classList.add('scroll-element');
        }else{
            event.target?.parentElement?.nextElementSibling?.classList.remove('scroll-element');
        }


        searchElements.forEach(element => {
            const searchAttribute = element.getAttribute('data-search-value')?.toLowerCase();

            if(element) {
                !filteredArray.includes(searchAttribute) ?
                    element.style.display = 'none' :
                    element.style.display = 'flex';
            }

            if(noDataElement) {
                filteredArray.length === 0 ?
                    noDataElement.style.display = 'block' :
                    noDataElement.style.display = 'none';
            }
        });
    });
}

export default function (
    filterType,
    filterArray,
    parentFilterClassProp,
    containerFilterClassProp,
    singleFilterClassesProp,
    searchFilterClassProp,
    title
)
{
    if(athenaConfig.filterSearchEnable) {
        const filterArrayLength = filterArray.length;

        searchFilterObject.singleFilterClasses.push(singleFilterClassesProp);
        searchFilterObject.searchFilterClass = searchFilterClassProp;

        if(filterArrayLength > athenaConfig.filterSearchAppearOnElements) {
            const filterElement = document.querySelector(`${parentFilterClassProp} [data-filter-type="${filterType}"] ${containerFilterClassProp}`);

            renderSearchInput(
                filterElement,
                filterType,
                title
            );
        }
    }
}