import { useState } from 'react'
import { IRegion } from '../interfaces/fuel'
import { useStorages } from '../hooks/swrHooks'
import { Loader, Table } from '@mantine/core'

export default function ServerStorage() {
    const [selectedOption] = useState<IRegion | null>(null)

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

    const storageColumns = [
        { field: 'id', headerName: 'ID', type: 'number' },
        { field: 'hardware_id', headerName: 'Hardware ID', type: 'number' },
        { field: 'name', headerName: 'Название', type: 'string' },
        { field: 'size', headerName: 'Размер', type: 'string' },
        { field: 'storage_type', headerName: 'Тип хранилища', type: 'string' },
    ]

    return (
        <>
            {serversLoading ?
                <Loader />
                :
                <Table highlightOnHover>
                    <Table.Thead>
                        <Table.Tr>
                            {storageColumns.map(column => (
                                <Table.Th key={column.field}>{column.headerName}</Table.Th>
                            ))}
                        </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
                        <Table.Tr>
                            {storageColumns.map(column => (
                                <Table.Td key={column.field}>{storages ? storages[column.field] : ''}</Table.Td>
                            ))}
                        </Table.Tr>
                    </Table.Tbody>
                </Table>
            }
        </>
    )
}