import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
import { useState } from '@wordpress/element'
import SidebarAutocompleteList from './sidebar-autocomplete-list'
import React from 'react';

const SidebarAutocomplete = ({ onChange, limit, yAxis }) => {
    const [inputTitle, setInputTitle] = useState();
    const [institutions, setInstitutions] = useState([]);
    const fetchMetaSuggestions = async (key, query) => {
        if (!query) {
            setInstitutions({
                ...institutions,
                [key]: []
            })
            return;
        }

        try {
            const response = await fetch(`${wpApiSettings.root}casaca/institution/get_institution?search=${query}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': wpApiSettings.nonce
                }
            })
            const responseData = await response.json();

            if (responseData.data.length >= 1) {
                setInstitutions({
                    ...institutions,
                    [key]: responseData.data
                })
            }

        } catch (error) {
            setInstitutions({
                ...institutions,
                [key]: []
            })
        }
    }

    const setMetaQuery = (key, input) => {
        setInputTitle(input)

        if (input.length > 3) {
            const delayDebounceFn = setTimeout(() => {
                fetchMetaSuggestions(key, input);
            }, 300);

            return () => clearTimeout(delayDebounceFn);
        }
    }

    return (
        <>
            <PanelBody title="Buscar Instituições" initialOpen={true}>
                <PanelRow>
                    <TextControl
                        label="Digite para buscar pelo título"
                        value={inputTitle}
                        onChange={(value) => setMetaQuery('tainacan_institution_title', value)}
                    />
                </PanelRow>
                {institutions?.['tainacan_institution_title']?.length > 0 && (
                    <SidebarAutocompleteList
                        institutions={institutions['tainacan_institution_title']}
                        onChange={onChange}
                        limit={limit}
                        yAxis={yAxis}
                    />
                )}
            </PanelBody>
        </>
    );
};

export default SidebarAutocomplete