import { useEffect, useState } from 'react'
import { useBoilers } from '../hooks/swrHooks'
import { Badge, ScrollAreaAutosize, Table, Text } from '@mantine/core'
import { IBoiler } from '../interfaces/fuel'

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("")
    }, [])

    const boilersColumns = [
        { field: 'id_object', headerName: 'ID', type: "number" },
        { field: 'boiler_name', headerName: 'Название', type: "string", flex: 1 },
        { field: 'boiler_code', headerName: 'Код', type: "string", flex: 1 },
        { field: 'id_city', headerName: 'Город', type: "string", flex: 1 },
        { field: 'activity', headerName: 'Активен', type: "boolean", flex: 1 },
    ]

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

            {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>
            }
        </ScrollAreaAutosize>
    )
}

export default Boilers