import { useState } from 'react'
import { useServerIps, useServers } from '../hooks/swrHooks'
import { IServer } from '../interfaces/servers'
import { Combobox, Option, Spinner } from '@fluentui/react-components'
import CustomTable from './CustomTable'

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

    const { serverIps, isLoading: serversLoading } = useServerIps(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)
                    }
                }}
            >
                {servers?.map((item: IServer) => (
                    <Option key={item.id} value={item.id.toString()}>
                        {item.name}
                    </Option>
                ))}
            </Combobox>

            {serversLoading ?
                <Spinner />
                :
                <CustomTable data={serverIps} columns={[
                    { name: 'id', header: 'ID', type: 'number' },
                    { name: 'server_id', header: 'Server ID', type: 'number' },
                    { name: 'name', header: 'Название', type: 'string' },
                    { name: 'is_actual', header: 'Действителен', type: 'boolean' },
                    { name: 'ip', header: 'IP', type: 'string' },
                    { name: 'servername', header: 'Название сервера', type: 'string' },
                ]} />
            }
        </>
    )
}