import '../../header.sass';
import React, {useEffect, useState} from "react";
import Select, { components } from 'react-select';
import dummy from './dummy';
import AsyncSelect from "react-select/async";

 // Тут были не нужные стили

function SelectsDrop() {
    const [items, setItems] = useState([]);

// Тут я пытался по документации и подсказкам заставить работать поиск, если в loadOptions вывести fetchData то данные работают, но сам поиск не работает и я пытался их вывести через фильтр как в документации (Она ещё и на тайпскрипте написана пиздец), чтобы сравнивать инпут и базу.

    const fetchData = inputValue => {
        return dummy.get(`/country?query=${inputValue}`).then(result => {
            const res = result.data.data;
            return res;
        });
    }


    const filterColors = (inputValue) => {
        return Object.values(fetchData).filter((i) =>
            i.name.toLowerCase().includes(inputValue.toLowerCase())
        );
    };

    const loadOptions = (
        inputValue
    ) => {
        setTimeout(() => {
            (filterColors(inputValue));
        }, 1000);
    };


        return (
            <div className="city__select">

                <AsyncSelect
                    components={{DropdownIndicator}}
                    placeholder={"Выбор страны"}
                    cacheOptions
                    defaultOptions
                    getOptionLabel={e => e.name}
                    getOptionValue={e => e.id}
                    styles={customStyles}
                    loadOptions={loadOptions}
                />

            </div>
        )

}
export default SelectsDrop;