// callback для получения данных стран/региона/города

const loadOptions = (inputValue, callback) => {
    dummy.get(`country?CountrySearch[query]=${inputValue}`)
        .then((response) => {
            const options = []
            response.data.data.forEach((permission) => {
                options.push({
                    label: permission.name,
                    value: permission.id
                })
            })
            callback(options);
        })
}

const loadOptions2 = (inputValue, callback) => {
    dummy.get(`region?RegionSearch[query]=${inputValue}`)
        .then((response) => {
            const options = []
            response.data.data.forEach((permission) => {
                options.push({
                    label: permission.name,
                    value: permission.country_id
                })
            })
            callback(options);
        })
}

const loadOptions3 = (inputValue, callback) => {
    dummy.get(`city?CitySearch[query]=${inputValue}`)
        .then((response) => {
            const options = []
            response.data.data.forEach((permission) => {
                options.push({
                    label: permission.name,
                    value: permission.region_id
                })
            })
            callback(options);
        })
}


//Тут Селекты которые нужно связать

function SelectsDrop() {
const [selectedCountry, setSelectedCountry] = useState('');
const [selectedRegion, setSelectedRegion] = useState('');
const [selectedCity, setSelectedCity] = useState('');



const handleCity = value =>{
    setSelectedCity(value)
}

const handleRegion = value =>{
    setSelectedRegion(value)
}

const handleCountry = value =>{
    setSelectedCountry(value)
}

        return (
            <div className="city__select">
                {JSON.stringify(selectedCountry.value)},
                {JSON.stringify(selectedRegion.value)},
                {JSON.stringify(selectedCity.value)}
                <AsyncSelect
                    components={{DropdownIndicator}}
                    placeholder={"Выбор страны"}
                    cacheOptions
                    defaultOptions
                    styles={customStyles}
                    value={selectedCountry}
                    onChange={handleCountry}
                    loadOptions={loadOptions}
                />

                <AsyncSelect
                    components={{DropdownIndicator}}
                    placeholder={"Выбрать регион"}
                    cacheOptions
                    defaultOptions
                    styles={customStyles}
                    value={selectedRegion}
                    onChange={handleRegion}
                    loadOptions={loadOptions2}
                />

                <AsyncSelect
                    components={{DropdownIndicator}}
                    placeholder={"Город"}
                    cacheOptions
                    defaultOptions
                    styles={customStyles}
                    value={selectedCity}
                    onChange={handleCity}
                    loadOptions={loadOptions3}
                />
            </div>
        )

}
export default SelectsDrop;