tests/client/src/components/ServerIpsView.tsx

import { AppBar, CircularProgress, Dialog, IconButton, TextField, Toolbar } from '@mui/material'
import { Fragment, useState } from 'react'
import { IRegion } from '../interfaces/fuel'
import { useServerIps, useServers } from '../hooks/swrHooks'
import ServerService from '../services/ServersService'
import { GridColDef } from '@mui/x-data-grid'
import { Close } from '@mui/icons-material'
import ServerData from './ServerData'
import { Autocomplete, CloseButton, Table } from '@mantine/core'
import { IServer } from '../interfaces/servers'

export default function ServerIpsView() {
    const [open, setOpen] = useState(false)
    const [selectedOption, setSelectedOption] = useState<number | null>(null)
    const { servers, isLoading } = useServers()

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

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

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

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

    const serverIpsColumns: GridColDef[] = [
        { field: 'id', headerName: 'ID', type: 'number' },
        { field: 'server_id', headerName: 'Server ID', type: 'number' },
        { field: 'name', headerName: 'Название', type: 'string' },
        { field: 'is_actual', headerName: 'Действителен', type: 'boolean' },
        { field: 'ip', headerName: 'IP', type: 'string' },
        { field: 'servername', headerName: 'Название сервера', type: 'string' },
    ]

    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>

            <form>
                <Autocomplete
                    placeholder="Сервер"
                    flex={'1'}
                    data={servers ? servers.map((item: IServer) => ({ 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>

            {serversLoading ?
                <CircularProgress />
                :
                // <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={servers || []}
                //             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={serverIps || []}
                //     columns={serverIpsColumns}
                //     actions
                //     onRowClick={(params) => {
                //         setCurrentServerData(params.row)
                //         setServerDataOpen(true)
                //     }} loading={false}
                // />
                <Table highlightOnHover>
                    <Table.Thead>
                        <Table.Tr>
                            {serverIpsColumns.map(column => (
                                <Table.Th key={column.field}>{column.headerName}</Table.Th>
                            ))}
                        </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
                        <Table.Tr
                        //bg={selectedRows.includes(element.position) ? 'var(--mantine-color-blue-light)' : undefined}
                        >
                            {serverIpsColumns.map(column => (
                                <Table.Td key={column.field}>{servers ? servers[column.field] : ''}</Table.Td>
                            ))}
                        </Table.Tr>
                    </Table.Tbody>
                </Table>
            }
        </>
    )
}