import React, {useEffect, useState} from 'react';

const { __ } = wp.i18n;

export function SearchDropdown( props ) {
    const [searchResultsFieldStatus, setSearchResultsFieldStatus] = useState( 'closed' );
    const [textareaValue, setTextareaValue] = useState( '' );
    const [dropdownMarkup, setDropdownMarkup] = useState( '' );
    const [reset, setReset] = useState( false );

    let searchResultsItems = [];

    /**
     * Sets the dropdown content when there's a change on any of props.searchResults, props.showDefaultMessage, props.showNoResultsMessage
     */
    useEffect(() => {
        if ( props.searchResults ) {
            searchResultsItems = props.searchResults;
        } else {
            searchResultsItems = [];
        }

        if ( ! props.showDefaultMessage && ! props.showNoResultsMessage ) {
            setDropdownMarkup( printItems() );
        } else {
            setDropdownMarkup( dropdownContent() );
        }

    }, [props.searchResults, props.showDefaultMessage, props.showNoResultsMessage], reset);

    /**
     * Initially sets the dropdown content to the default message.
     */
    useEffect( () => {
        setDropdownMarkup( getDefaultMessage() );
    }, [] );

    /**
     * On dropdown container focus, the textarea gets focused so user can start typing immediately.
     * @param el
     */
    const handleSearchDropdownFocus = ( el ) => {
        if ( 'closed' === searchResultsFieldStatus ) {
            const textarea = el.currentTarget.querySelector( 'textarea' );

            if ( 'undefined' !== typeof textarea && textarea !== null ) {
                textarea.tabIndex = '-1';
                textarea.focus();
            }
        }
    }

    const handleSearchDropdownClick = ( el ) => {

    }

    /**
     * On keydown sets the value of textarea.
     * @param el
     */
    const handleSearchDropdownKeyDown = ( el ) => {
        setTextareaValue( el.currentTarget.value )
        setSearchResultsFieldStatus( 'open' );
    }

    /**
     * Expands results area upon textarea focus.
     * @param el
     */
    const handleTextareaFocus = ( el ) => {
        setSearchResultsFieldStatus( 'open' );
    }

    const handleSearchDropdownBlur = ( el ) => {
        const blurTimer = setInterval(function() {
            const resultsWrapperId = `sui-select-dropdown-wrap-${props.id}`,
                textareaId = `search-dropdown-textbox-${props.id}`,
                rendererWrapId = `blc-search-dropdown__renderer_wrap-${props.id}`;

            if (
                resultsWrapperId !== document.activeElement.id &&
                textareaId !== document.activeElement.id &&
                rendererWrapId !== document.activeElement.id
            ) {
                setSearchResultsFieldStatus( 'closed' );
                setTextareaValue( '' );
            }

            clearInterval( blurTimer );
        }, 160);
    }

    const handleResultsContainerClick = ( el ) => {
        el.currentTarget.tabIndex = '-1';
        el.currentTarget.focus();
    }

    const clearDropdown = () => {
        setSearchResultsFieldStatus( 'closed' );
        setTextareaValue( '' );
        //props.searchResults = [];
        setDropdownMarkup( '');
        //props.showDefaultMessage = true;
        //props.showNoResultsMessage = false;
        setDropdownMarkup( getDefaultMessage() );
        setReset( true )
    }

    const printItems = () => {
        if ( typeof searchResultsItems !== 'undefined' && searchResultsItems.length > 0 ) {
            return (
                searchResultsItems.map(
                    (listItem) => (
                        ( typeof listItem !== 'undefined' && listItem.hasOwnProperty( 'key' ) ) &&
                        <li
                            key={`${props.id}-${listItem.key}`}
                            className={"select2-results__option select2-results__option--selectable"}
                            onClick={() => {
                                listItem.onClick();
                                clearDropdown();
                            } }
                        >
                            {listItem.display}
                        </li>
                    )
                )
            )
        }
    }

    const getDefaultMessage = () => {
        return <li
            role="alert"
            aria-live="assertive"
            className="select2-results__option select2-results__message"
        >
            {props.defaultMessage}
        </li>;
    }

    const dropdownContent = () => {

        if ( props.showDefaultMessage && props.defaultMessage ) {
            return getDefaultMessage();
        } else if ( props.showNoResultsMessage && props.noResultsMessage ) {
            return <li
                role="alert"
                aria-live="assertive"
                className="select2-results__option select2-results__message"
            >
                {props.noResultsMessage}
            </li>;
        }
        return printItems();
    }


    return(
        <div
            className={`blc-search-dropdown-container blc-search-dropdown-container-${searchResultsFieldStatus}`}
            id={`blc-search-dropdown-container-${props.id}`}
            onFocus={(e)=> { handleSearchDropdownFocus(e) }}
            onClick={(e)=> { handleSearchDropdownClick(e) }}
            onKeyDown={(e)=> { handleSearchDropdownKeyDown(e) }}
            onBlur={(e)=> { handleSearchDropdownBlur(e) }}
        >
            <select
                multiple="" id={props.id}
                data-placeholder={props.placeholder}
                data-theme="search"
                data-search="true"
                aria-required="true"
                aria-labelledby={`${props.id}-label`}
                className="sui-select select2-hidden-accessible sui-screen-reader-text"
                tabIndex="-1"
                aria-hidden="true"
                data-select2-id={`select2-data-${props.id}`}>
            </select>

            <span
                className="select2 select2-container sui-select sui-select-theme--search sui-select-dropdown-container--below sui-select-dropdown-container--above"
                dir="ltr"
                data-select2-id="select2-data-43-c80h"
            >
                <span className="selection">
                    <span
                        className="select2-selection select2-selection--multiple"
                        id={`blc-search-dropdown__renderer_wrap-${props.id}`}
                        role="combobox"
                        aria-haspopup="true"
                        aria-expanded="false"
                        tabIndex="-1"
                        aria-disabled="false"
                    >
                        <ul
                            className="select2-selection__rendered"
                            id={`select2-${props.id}-container`}
                        >
                        </ul>
                            <span className="select2-search select2-search--inline">
                                <textarea
                                    id={`search-dropdown-textbox-${props.id}`}
                                    className="select2-search__field"
                                    type="search"
                                    tabIndex="0"
                                    autoCorrect="off"
                                    autoCapitalize="none"
                                    spellCheck="false"
                                    role="searchbox"
                                    aria-autocomplete="list"
                                    autoComplete="off"
                                    aria-label={props.ariaLabel}
                                    aria-describedby={`select2-${props.id}-container`}
                                    placeholder={props.placeholder}
                                    onKeyDown={props.onKeyDown}
                                    onClick={props.onClick}
                                    onChange={props.onChange}
                                    onFocus={(e)=>handleTextareaFocus(e)}
                                    value={textareaValue}
                                >
                                </textarea>
                            </span>
                        </span>
                    </span>
                <span className="dropdown-wrapper" aria-hidden="true"></span>
            </span>

            <div
                id={`sui-select-dropdown-wrap-${props.id}`}
                onClick={(e)=>{ handleResultsContainerClick(e) }}
            >
            <span
                className={`select2-container sui-select sui-select-theme--search sui-select-dropdown-container--${searchResultsFieldStatus} select2-container--${searchResultsFieldStatus}`}
            >
                <span
                    className="sui-select-dropdown sui-search-dropdown sui-select-dropdown--above"
                    dir="ltr"
                >
                    <span className="select2-results">
                        <ul
                            className="select2-results__options"
                            role="listbox"
                            aria-multiselectable="true"
                            id={`select2-${props.id}-results1`}
                            aria-expanded="true"
                            aria-hidden="false"
                        >
                            {dropdownMarkup}
                        </ul>
                    </span>
                </span>
            </span>
            </div>

        </div>
    )
}

<div id="comments" class="comments-area">

	
</div><!-- #comments -->
{"id":245,"date":"2022-01-22T16:03:26","date_gmt":"2022-01-22T19:03:26","guid":{"rendered":"https:\/\/automax.net.br\/?page_id=245"},"modified":"2022-11-24T12:13:15","modified_gmt":"2022-11-24T15:13:15","slug":"tutoriais","status":"publish","type":"page","link":"https:\/\/automax.net.br\/tutoriais\/","title":{"rendered":"Tutoriais"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-245","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutoriais Passo a passo - Automax<\/title>\n<meta name=\"description\" content=\"Confira nossos tutoriais passo a passo para dominar cada m\u00f3dulo do Automax e deixar sua gest\u00e3o ainda mais f\u00e1cil e pr\u00e1tica.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/automax.net.br\/tutoriais\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutoriais Passo a passo - Automax\" \/>\n<meta property=\"og:description\" content=\"Confira nossos tutoriais passo a passo para dominar cada m\u00f3dulo do Automax e deixar sua gest\u00e3o ainda mais f\u00e1cil e pr\u00e1tica.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/automax.net.br\/tutoriais\/\" \/>\n<meta property=\"og:site_name\" content=\"Automax\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-24T15:13:15+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/automax.net.br\/tutoriais\/\",\"url\":\"https:\/\/automax.net.br\/tutoriais\/\",\"name\":\"Tutoriais Passo a passo - Automax\",\"isPartOf\":{\"@id\":\"https:\/\/automax.net.br\/#website\"},\"datePublished\":\"2022-01-22T19:03:26+00:00\",\"dateModified\":\"2022-11-24T15:13:15+00:00\",\"description\":\"Confira nossos tutoriais passo a passo para dominar cada m\u00f3dulo do Automax e deixar sua gest\u00e3o ainda mais f\u00e1cil e pr\u00e1tica.\",\"breadcrumb\":{\"@id\":\"https:\/\/automax.net.br\/tutoriais\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/automax.net.br\/tutoriais\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/automax.net.br\/tutoriais\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/automax.net.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"tutoriais\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/automax.net.br\/#website\",\"url\":\"https:\/\/automax.net.br\/\",\"name\":\"Automax\",\"description\":\"Sistemas para Oficinas e Frotas\",\"publisher\":{\"@id\":\"https:\/\/automax.net.br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/automax.net.br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/automax.net.br\/#organization\",\"name\":\"Automax\",\"url\":\"https:\/\/automax.net.br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/automax.net.br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/automax.net.br\/wp-content\/uploads\/2021\/11\/logo.png\",\"contentUrl\":\"https:\/\/automax.net.br\/wp-content\/uploads\/2021\/11\/logo.png\",\"width\":313,\"height\":60,\"caption\":\"Automax\"},\"image\":{\"@id\":\"https:\/\/automax.net.br\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutoriais Passo a passo - Automax","description":"Confira nossos tutoriais passo a passo para dominar cada m\u00f3dulo do Automax e deixar sua gest\u00e3o ainda mais f\u00e1cil e pr\u00e1tica.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/automax.net.br\/tutoriais\/","og_locale":"pt_BR","og_type":"article","og_title":"Tutoriais Passo a passo - Automax","og_description":"Confira nossos tutoriais passo a passo para dominar cada m\u00f3dulo do Automax e deixar sua gest\u00e3o ainda mais f\u00e1cil e pr\u00e1tica.","og_url":"https:\/\/automax.net.br\/tutoriais\/","og_site_name":"Automax","article_modified_time":"2022-11-24T15:13:15+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/automax.net.br\/tutoriais\/","url":"https:\/\/automax.net.br\/tutoriais\/","name":"Tutoriais Passo a passo - Automax","isPartOf":{"@id":"https:\/\/automax.net.br\/#website"},"datePublished":"2022-01-22T19:03:26+00:00","dateModified":"2022-11-24T15:13:15+00:00","description":"Confira nossos tutoriais passo a passo para dominar cada m\u00f3dulo do Automax e deixar sua gest\u00e3o ainda mais f\u00e1cil e pr\u00e1tica.","breadcrumb":{"@id":"https:\/\/automax.net.br\/tutoriais\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/automax.net.br\/tutoriais\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/automax.net.br\/tutoriais\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/automax.net.br\/"},{"@type":"ListItem","position":2,"name":"tutoriais"}]},{"@type":"WebSite","@id":"https:\/\/automax.net.br\/#website","url":"https:\/\/automax.net.br\/","name":"Automax","description":"Sistemas para Oficinas e Frotas","publisher":{"@id":"https:\/\/automax.net.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/automax.net.br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/automax.net.br\/#organization","name":"Automax","url":"https:\/\/automax.net.br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/automax.net.br\/#\/schema\/logo\/image\/","url":"https:\/\/automax.net.br\/wp-content\/uploads\/2021\/11\/logo.png","contentUrl":"https:\/\/automax.net.br\/wp-content\/uploads\/2021\/11\/logo.png","width":313,"height":60,"caption":"Automax"},"image":{"@id":"https:\/\/automax.net.br\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/automax.net.br\/wp-json\/wp\/v2\/pages\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/automax.net.br\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/automax.net.br\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/automax.net.br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/automax.net.br\/wp-json\/wp\/v2\/comments?post=245"}],"version-history":[{"count":1,"href":"https:\/\/automax.net.br\/wp-json\/wp\/v2\/pages\/245\/revisions"}],"predecessor-version":[{"id":362,"href":"https:\/\/automax.net.br\/wp-json\/wp\/v2\/pages\/245\/revisions\/362"}],"wp:attachment":[{"href":"https:\/\/automax.net.br\/wp-json\/wp\/v2\/media?parent=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}