import { useEffect, useState } from 'react'
import { useBoilers } from '../hooks/swrHooks'
import { Stack, Text } from '@mantine/core'
import CustomTable from '../components/CustomTable'

function Boilers() {
    const [boilersPage, setBoilersPage] = useState(1)
    const [boilerSearch, setBoilerSearch] = useState("")
    const [debouncedBoilerSearch, setDebouncedBoilerSearch] = useState("")
    const { boilers } = useBoilers(10, boilersPage, debouncedBoilerSearch)

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedBoilerSearch(boilerSearch)
        }, 500)

        return () => {
            clearTimeout(handler)
        }
    }, [boilerSearch])

    useEffect(() => {
        setBoilersPage(1)
        setBoilerSearch("")
    }, [])

    return (
        <Stack w={'100%'} h={'100%'} p='sm'>
            <Text size="xl" fw={600}>
                Котельные
            </Text>

            {boilers &&
                <CustomTable data={boilers} columns={[
                    {
                        accessorKey: 'id_object',
                        header: 'ID',
                        cell: (info) => info.getValue(),
                    },
                    {
                        accessorKey: 'boiler_name',
                        header: 'Название',
                        cell: (info) => info.getValue(),
                    },
                    {
                        accessorKey: 'boiler_code',
                        header: 'Код',
                        cell: (info) => info.getValue(),
                    },
                    {
                        accessorKey: 'id_city',
                        header: 'Город',
                        cell: (info) => info.getValue(),
                    },
                    {
                        accessorKey: 'activity',
                        header: 'Активен',
                        cell: (info) => info.getValue(),
                    },
                ]} />
            }

            {/* {boilers &&
                <Table highlightOnHover>
                    <Table.Thead>
                        <Table.Tr>
                            {boilersColumns.map(column => (
                                <Table.Th key={column.field}>{column.headerName}</Table.Th>
                            ))}
                        </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
                        {boilers.map((boiler: IBoiler) => (
                            <Table.Tr key={boiler.id_object}>
                                {boilersColumns.map(column => {
                                    if (column.field === 'activity') {
                                        return (
                                            boiler.activity ? (
                                                <Table.Td key={`${boiler.id_object}-${boiler[column.field]}`}>
                                                    <Badge fullWidth variant="light">
                                                        Активен
                                                    </Badge>
                                                </Table.Td>

                                            ) : (
                                                <Table.Td key={`${boiler.id_object}-${boiler[column.field]}`}>
                                                    <Badge color="gray" fullWidth variant="light">
                                                        Отключен
                                                    </Badge>
                                                </Table.Td>
                                            )
                                        )
                                    }
                                    else return (
                                        <Table.Td key={`${boiler.id_object}-${column.field}`}>{boiler[column.field as keyof IBoiler]}</Table.Td>
                                    )
                                })}
                            </Table.Tr>
                        ))}
                    </Table.Tbody>
                </Table>
            } */}
        </Stack>
    )
}

export default Boilers