import { AppBar, Autocomplete, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material'
import { Fragment, useEffect, useState } from 'react'
import { IRegion } from '../interfaces/fuel'
import { useHardwares, useServers } from '../hooks/swrHooks'
import FullFeaturedCrudGrid from './TableEditable'
import ServerService from '../services/ServersService'
import { GridColDef } from '@mui/x-data-grid'
import { Close } from '@mui/icons-material'
import ServerData from './ServerData'

export default function ServerHardware() {
    const [open, setOpen] = useState(false)
    const [options, setOptions] = useState<IRegion[]>([])
    const [search, setSearch] = useState<string | null>("")
    const [debouncedSearch, setDebouncedSearch] = useState<string | null>("")
    const [selectedOption, setSelectedOption] = useState<IRegion | null>(null)
    const { servers, isLoading } = useServers()

    const [serverDataOpen, setServerDataOpen] = useState(false)
    const [currentServerData, setCurrentServerData] = useState<any | null>(null)

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

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

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

    const handleInputChange = (value: string) => {
        setSearch(value)
    }

    const handleOptionChange = (value: IRegion | null) => {
        setSelectedOption(value)
    }

    const { hardwares, isLoading: serversLoading } = useHardwares(selectedOption?.id, 0, 10)

    const hardwareColumns: GridColDef[] = [
        { field: 'id', headerName: 'ID', type: 'number' },
        { field: 'name', headerName: 'Название', type: 'string' },
        { field: 'server_id', headerName: 'Server ID', type: 'number' },
        { field: 'servername', headerName: 'Название сервера', type: 'string' },
        { field: 'os_info', headerName: 'ОС', type: 'string' },
        { field: 'ram', headerName: 'ОЗУ', type: 'string' },
        { field: 'processor', headerName: 'Проц.', type: 'string' },
        { field: 'storages_count', headerName: 'Кол-во хранилищ', type: 'number' },
    ]

    return (
        <>
            <Dialog
                fullScreen
                open={serverDataOpen}
                onClose={() => {
                    setServerDataOpen(false)
                }}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description">
                <AppBar sx={{ position: 'sticky' }}>
                    <Toolbar>
                        <IconButton
                            edge="start"
                            color="inherit"
                            onClick={() => {
                                setServerDataOpen(false)
                            }}
                            aria-label="close"
                        >
                            <Close />
                        </IconButton>
                    </Toolbar>
                </AppBar>

                {currentServerData &&
                    <ServerData
                        id={currentServerData?.id}
                        region_id={currentServerData?.region_id}
                        name={currentServerData?.name}
                    />
                }
            </Dialog>

            {serversLoading ?
                <CircularProgress />
                :
                hardwares &&
                <FullFeaturedCrudGrid
                    autoComplete={<Autocomplete
                        open={open}
                        onOpen={() => {
                            setOpen(true)
                        }}
                        onClose={() => {
                            setOpen(false)
                        }}
                        onInputChange={(_, value) => handleInputChange(value)}
                        onChange={(_, value) => handleOptionChange(value)}
                        filterOptions={(x) => x}
                        isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name}
                        getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
                        options={options}
                        loading={isLoading}
                        value={selectedOption}
                        renderInput={(params) => (
                            <TextField
                                {...params}
                                label="Сервер"
                                size='small'
                                InputProps={{
                                    ...params.InputProps,
                                    endAdornment: (
                                        <Fragment>
                                            {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
                                            {params.InputProps.endAdornment}
                                        </Fragment>
                                    )
                                }} />
                        )} />}
                    onSave={(id: any) => {
                    }}
                    onDelete={ServerService.removeServer}
                    initialRows={hardwares}
                    columns={hardwareColumns}
                    actions
                    onRowClick={(params, event, details) => {
                        setCurrentServerData(params.row)
                        setServerDataOpen(true)
                    }} loading={false} />
            }
        </>
    )
}