import { useState } from 'react'
import { IRegion } from '../interfaces/fuel'
import { useRegions, useServers } from '../hooks/swrHooks'
import { useDebounce } from '@uidotdev/usehooks'
import CustomTable from './CustomTable'
import { Combobox, Option } from '@fluentui/react-components'

export default function ServersView() {
    const [search, setSearch] = useState<string | undefined>("")

    const debouncedSearch = useDebounce(search, 500)

    const [selectedOption, setSelectedOption] = useState<number | null>(null)

    const { regions } = useRegions(10, 1, debouncedSearch)

    const { servers } = useServers(selectedOption, 0, 10)

    return (
        <>
            <Combobox
                clearable
                placeholder="Район"
                style={{ flex: 1 }}
                onChange={(e) => setSearch(e.currentTarget.value)}
                selectedOptions={selectedOption ? [selectedOption.toString()] : []}
                onOptionSelect={(_, data) => {
                    if (data.optionValue) {
                        setSelectedOption(Number(data.optionValue));
                    } else {
                        setSelectedOption(null)
                    }
                }}
            >
                {regions?.map((item: IRegion) => (
                    <Option key={item.id} value={item.id.toString()}>
                        {item.name}
                    </Option>
                ))}
            </Combobox>

            {servers &&
                <CustomTable
                    data={servers}
                    columns={[
                        {
                            name: 'name',
                            header: 'Название',
                            type: "string",
                            //editable: true,
                        },
                        {
                            name: 'region_id',
                            //editable: true,
                            header: 'region_id',
                            type: 'dictionary'
                        }
                    ]} />}
        </>
    )
}