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

const SidebarAutocomplete = () =>{
    const [inputTitle, setInputTitle] = useState();
    const [inputAuthor, setInputAuthor] = useState();
    const [inputIdentifier, setInputIdentifier] = useState();
    const [inputDate, setInputDate] = useState();
    const [selectedItemsData, setSelectedItemsData] = useState([]);

    const [items, setItems] = useState([]);
    const postId = useSelect((select) => select('core/editor').getCurrentPostId(), [])
    
    const onChangeSelectedItemsData = (items) => {
        setSelectedItemsData(items)
    }

    const fetchMetaSuggestions = async (key, query) => {
        if (!query) {
            setItems({...items,
                [key]: []
            })
            return;
        }

        try {
            let compare = 'LIKE'

            if (key === '109'){
                compare = '='
            }

            const response = await fetch(`${wpApiSettings.root}tainacan/v2/collection/5/items?status=publish&metaquery[0][key]=${key}&metaquery[0][compare]=${compare}&metaquery[0][value]=${query}`)
            const data = await response.json();

            if (data.items.length >= 1){
                setItems({...items,
                    [key]: data.items
                })
            }

        } catch (error) {
            setItems({...items,
                [key]: []
            })
        }
    }

    const fetchAuthorsSuggestions = async (query) => {
        if (!query) {
            setItems({...items,
                ['authors']: []
            })
            return
        }

        try {
            const response = await fetch(`${wpApiSettings.root}tainacan/v2/collection/5/items?status=publish&taxquery[0][key]=103&taxquery[0][taxonomy]=tnc_tax_82&taxquery[0][operator]=LIKE&taxquery[0][terms]=${query}&advancedSearch=true`)
            const data = await response.json();

            if (data.items.length >= 1){
                setItems({...items,
                    ['authors']: data.items
                })
                return
            }

        } catch (error) {
            setItems({...items,
                ['authors']: []
            })
            return
        }
    }

    const setMetaQuery = (key, input) => {
        switch (key) {
            case 'tainacan_core_title':
                setInputTitle(input)
                break;

            case '21':
                setInputIdentifier(input)
                break;
            
            case '109':
                setInputDate(input)
                break;
            default:
                break;
        }

        if (input.length == 0){
            setItems({...items,
                [key]: []
            })            
        }

        if (input.length > 3) {
            setItems({...items,
                [key]: []
            })

            const delayDebounceFn = setTimeout(() => {
                fetchMetaSuggestions(key, input);
            }, 300);
    
            return () => clearTimeout(delayDebounceFn);
        }
    }

    const setAuthorsQuery = (input) => {
        setInputAuthor(input)
        if (input.length > 3) {
            const delayDebounceFn = setTimeout(() => {
                fetchAuthorsSuggestions(input);
            }, 300);
    
            return () => clearTimeout(delayDebounceFn);
        }
    }

    return (
        <>
            <PanelBody title="Filtrar item único por título" initialOpen={true}>
                <PanelRow>
                    <TextControl
                        label="Digite para buscar pelo título"
                        value={inputTitle}
                        onChange={(value) => setMetaQuery('tainacan_core_title' ,value)}
                    />
                </PanelRow>
                { items?.['tainacan_core_title']?.length > 0 && (
                    <SidebarAutocompleteList
                        items={items['tainacan_core_title']}
                        postId={postId}
                        selectedItemsData={selectedItemsData}
                        onChangeSelectedItemsData={onChangeSelectedItemsData}
                    />
                )}
            </PanelBody>
            <PanelBody title="Filtrar item único por autor" initialOpen={false}>
                <PanelRow>
                    <TextControl
                        label="Digite para buscar por autor"
                        value={inputAuthor}
                        onChange={(value) => setAuthorsQuery(value)}
                    />
                </PanelRow>
                { items?.['authors']?.length > 0 && (
                    <SidebarAutocompleteList
                        items={items['authors']}
                        postId={postId}
                        selectedItemsData={selectedItemsData}
                        onChangeSelectedItemsData={onChangeSelectedItemsData}
                    />
                )}
            </PanelBody>
            <PanelBody title="Filtrar item único pelo identificador" initialOpen={false}>
                <PanelRow>                
                    <TextControl
                        label="Digite para buscar pelo identificador"
                        value={inputIdentifier}
                        onChange={(value) => setMetaQuery('21' ,value)}
                    />
                </PanelRow>
                { items?.['21']?.length > 0 && (
                    <SidebarAutocompleteList
                        items={items['21']}
                        postId={postId}
                        selectedItemsData={selectedItemsData}
                        onChangeSelectedItemsData={onChangeSelectedItemsData}
                    />
                )}
            </PanelBody>
            <PanelBody title="Filtrar item único pela data" initialOpen={false}>
                <PanelRow>                
                    <TextControl
                        label="Digite para buscar pela data"
                        value={inputDate}
                        onChange={(value) => setMetaQuery('109' ,value)}
                    />
                </PanelRow>
                { items?.['109']?.length > 0 && (
                    <SidebarAutocompleteList
                        items={items['109']}
                        postId={postId}
                        selectedItemsData={selectedItemsData}
                        onChangeSelectedItemsData={onChangeSelectedItemsData}
                    />
                )}
            </PanelBody>            
        </>
    );
};

export default SidebarAutocomplete