import { Autocomplete, Box, Button, CircularProgress, Paper, TextField, Typography } from "@mui/material"
import { useBoilers, useCities, useRegions, useServers } from "../hooks/swrHooks"
import { Fragment, useEffect, useState } from "react"
import { IRegion } from "../interfaces/fuel"
import { DataGrid, GridColDef } from "@mui/x-data-grid"

export default function ApiTest() {
    const [open, setOpen] = useState(false)
    const [options, setOptions] = useState<any>([])
    const [search, setSearch] = useState<any>(null)
    const [debouncedSearch, setDebouncedSearch] = useState("")
    const [selectedOption, setSelectedOption] = useState<IRegion | null>(null)
    const { regions, isLoading } = useRegions(10, 1, debouncedSearch)

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedSearch(search)
        }, 500)

        return () => {
            clearTimeout(handler)
        }
    }, [search])

    useEffect(() => {
        if (regions) {
            setOptions([...regions])
        }
    }, [regions])

    const handleInputChange = (event: any, value: any) => {
        setSearch(value)
    }

    const handleOptionChange = (event: any, value: any) => {
        setSelectedOption(value)
    }

    //const { boilers } = useBoilers(10, 1)
    //const { cities } = useCities(10, 1)
    const { servers, isLoading: serversLoading } = useServers(selectedOption?.id, 0, 10)

    const serversColumns: GridColDef[] = [
        { field: 'id', headerName: 'ID', type: "number" },
        { field: 'name', headerName: 'Название', type: "string" },
    ]

    return (
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
            <Paper elevation={1}>
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%', p: '16px'}}>
                    <Typography variant='h6' fontWeight='600'>
                        Get servers
                    </Typography>

                    <Autocomplete
                        open={open}
                        onOpen={() => {
                            setOpen(true)
                        }}
                        onClose={() => {
                            setOpen(false)
                        }}
                        onInputChange={handleInputChange}
                        onChange={handleOptionChange}
                        filterOptions={(x) => x}
                        isOptionEqualToValue={(option: any, value: any) => option.name === value.name}
                        getOptionLabel={(option: any) => option.name ? option.name : ""}
                        options={options}
                        loading={isLoading}
                        value={selectedOption}
                        renderInput={(params) => (
                            <TextField
                                {...params}
                                label="Район"
                                InputProps={{
                                    ...params.InputProps,
                                    endAdornment: (
                                        <Fragment>
                                            {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
                                            {params.InputProps.endAdornment}
                                        </Fragment>
                                    )
                                }}
                            />
                        )}
                    />

                    {serversLoading ?
                        <CircularProgress />
                        :
                        servers &&
                        <DataGrid
                            rowSelection={false}
                            rows={servers}
                            columns={serversColumns}
                        />
                    }
                </Box>
            </Paper>
        </Box>
    )
}