tests/client/src/components/ServersView.tsx

import { AppBar, Box, CircularProgress, Dialog, Grid, IconButton, TextField, Toolbar } from '@mui/material'
import { Fragment, useState } from 'react'
import { IRegion } from '../interfaces/fuel'
import { useRegions, useServers, useServersInfo } from '../hooks/swrHooks'
import ServerService from '../services/ServersService'
import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
import { Close, Cloud, CloudOff } from '@mui/icons-material'
import ServerData from './ServerData'
import { IServersInfo } from '../interfaces/servers'
import CardInfo from './CardInfo/CardInfo'
import CardInfoLabel from './CardInfo/CardInfoLabel'
import CardInfoChip from './CardInfo/CardInfoChip'
import { useDebounce } from '@uidotdev/usehooks'
import { Autocomplete, CloseButton, Table } from '@mantine/core'

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

    const debouncedSearch = useDebounce(search, 500)

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

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

    const { serversInfo } = useServersInfo(selectedOption)

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

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

    const serversColumns: GridColDef[] = [
        //{ field: 'id', headerName: 'ID', type: "number" },
        {
            field: 'name', headerName: 'Название', type: "string", editable: true,
        },
        {
            field: 'region_id',
            editable: true,
            headerName: 'region_id',
            renderCell: (params) => (
                <div>
                    {params.value}
                </div>
            ),
            // renderEditCell: (params: GridRenderCellParams) => (
            //     <Autocomplete
            //         sx={{ display: 'flex', flexGrow: '1' }}
            //         onInputChange={(_, value) => setSearch(value)}
            //         onChange={(_, value) => {
            //             params.value = value
            //         }}
            //         isOptionEqualToValue={(option: IRegion, value: IRegion) => option.name === value.name}
            //         getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
            //         options={regions || []}
            //         loading={isLoading}
            //         value={params.value}
            //         renderInput={(params) => (
            //             <TextField
            //                 {...params}
            //                 size='small'
            //                 variant='standard'
            //                 label="Район"
            //                 InputProps={{
            //                     ...params.InputProps,
            //                     endAdornment: (
            //                         <Fragment>
            //                             {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
            //                             {params.InputProps.endAdornment}
            //                         </Fragment>
            //                     )
            //                 }}
            //             />
            //         )}
            //     />
            // ),
            flex: 1
        }
    ]

    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>

            {serversInfo &&
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
                    <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 1, sm: 1, md: 2, lg: 3, xl: 4 }}>
                        {serversInfo.map((serverInfo: IServersInfo) => (
                            <Grid key={`si-${serverInfo.id}`} item xs={1} sm={1} md={1}>
                                <CardInfo label={serverInfo.name}>
                                    <CardInfoLabel label='Количество IP' value={serverInfo.IPs_count} />
                                    <CardInfoLabel label='Количество серверов' value={serverInfo.servers_count} />
                                    <CardInfoChip
                                        status={serverInfo.status === "Online"}
                                        label={serverInfo.status}
                                        iconOn={<Cloud />}
                                        iconOff={<CloudOff />}
                                    />
                                </CardInfo>
                            </Grid>
                        ))}
                    </Grid>
                </Box>
            }

            <form>
                <Autocomplete
                    placeholder="Район"
                    flex={'1'}
                    data={regions ? regions.map((item: IRegion) => ({ label: item.name, value: item.id.toString() })) : []}
                    onSelect={(e) => console.log(e.currentTarget.value)}
                    onChange={(value) => setSearch(value)}
                    onOptionSubmit={(value) => setSelectedOption(Number(value))}
                    rightSection={
                        search !== '' && (
                            <CloseButton
                                size="sm"
                                onMouseDown={(event) => event.preventDefault()}
                                onClick={() => {
                                    setSearch('')
                                    setSelectedOption(null)
                                }}
                                aria-label="Clear value"
                            />
                        )
                    }
                    value={search}
                />
            </form>


            <Table highlightOnHover>
                <Table.Thead>
                    <Table.Tr>
                        {serversColumns.map(column => (
                            <Table.Th key={column.field}>{column.headerName}</Table.Th>
                        ))}
                    </Table.Tr>
                </Table.Thead>
                <Table.Tbody>
                    <Table.Tr>
                        {serversColumns.map(column => (
                            <Table.Td key={column.field}>{servers ? servers[column.field] : ''}</Table.Td>
                        ))}
                    </Table.Tr>
                </Table.Tbody>
            </Table>

            {/* <FullFeaturedCrudGrid
                loading={serversLoading}
                autoComplete={
                    <Autocomplete
                        onInputChange={(_, value) => setSearch(value)}
                        onChange={(_, value) => setSelectedOption(value)}
                        isOptionEqualToValue={(option: IRegion, value: IRegion) => option.id === value.id}
                        getOptionLabel={(option: IRegion) => option.name ? option.name : ""}
                        options={regions || []}
                        loading={isLoading}
                        value={selectedOption}
                        renderInput={(params) => (
                            <TextField
                                {...params}
                                size='small'
                                label="Район"
                                InputProps={{
                                    ...params.InputProps,
                                    endAdornment: (
                                        <Fragment>
                                            {isLoading ? <CircularProgress color="inherit" size={20} /> : null}
                                            {params.InputProps.endAdornment}
                                        </Fragment>
                                    )
                                }}
                            />
                        )}
                    />
                }
                onSave={() => {
                }}
                onDelete={ServerService.removeServer}
                initialRows={servers}
                columns={serversColumns}
                actions
                onRowClick={(params) => {
                    setCurrentServerData(params.row)
                    setServerDataOpen(true)
                }}
            /> */}
        </>
    )
}