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

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

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

    return (
        <>
            <form>
                <Combobox
                    placeholder="Сервер"
                    style={{ flex: 1 }}
                    selectedOptions={selectedOption ? [selectedOption.toString()] : []}
                    onOptionSelect={(_, data) => {
                        if (data.optionValue) {
                            setSelectedOption(Number(data.optionValue));
                        }
                    }}
                >
                    {servers?.map((item: IServer) => (
                        <Option key={item.id} value={item.id.toString()}>
                            {item.name}
                        </Option>
                    ))}
                </Combobox>
            </form>

            {serversLoading ?
                <Spinner />
                :
                <CustomTable data={hardwares} columns={[
                    { name: 'id', header: 'ID', type: 'number' },
                    { name: 'name', header: 'Название', type: 'string' },
                    { name: 'server_id', header: 'Server ID', type: 'number' },
                    { name: 'servername', header: 'Название сервера', type: 'string' },
                    { name: 'os_info', header: 'ОС', type: 'string' },
                    { name: 'ram', header: 'ОЗУ', type: 'string' },
                    { name: 'processor', header: 'Проц.', type: 'string' },
                    { name: 'storages_count', header: 'Кол-во хранилищ', type: 'number' },
                ]} />
            }
        </>
    )
}