import useSWR from 'swr'
import { BASE_URL } from '../constants'
import { fetcher } from '../http/axiosInstance'
import { useState } from 'react'
import CustomTable from '../components/CustomTable'
import { Tab, TabList } from '@fluentui/react-components'

const DBManager = () => {
    const { data: tablesData } = useSWR(`/db/tables`, (key) => fetcher(key, BASE_URL.ems), {
        revalidateOnFocus: false
    })

    const [selectedTab, setSelectedTab] = useState<string | unknown>(undefined)

    return (
        <div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', padding: '0.5rem' }}>
            {tablesData && Array.isArray(tablesData) && tablesData.length > 0 &&
                <div style={{ width: '100%', height: '100%' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                        <TabList selectedValue={selectedTab} onTabSelect={(_, data) => setSelectedTab(data.value)}>
                            {tablesData.map(table => (
                                <Tab key={table.tablename} value={table.tablename}>
                                    {table.tablename}
                                </Tab>
                            ))}
                        </TabList>

                        <div style={{ width: '100%', height: '100%' }}>
                            {tablesData.map((table) => {
                                if (table.tablename === selectedTab)
                                    return (
                                        <TableData tablename={table.tablename} />
                                    )
                            })}
                        </div>
                    </div>

                </div>
            }
            {/* <Card withBorder radius='sm'>
                <Stack>
                    <Group justify='flex-start'>
                        <Text fw='bold'>Figures</Text>
                    </Group>
                    <Grid>
                        <Button>Import from New_Gis (erases data)</Button>
                    </Grid>
                </Stack>
            </Card> */}
        </div>
    )
}

const TableData = ({
    tablename
}: { tablename: string }) => {
    const [offset] = useState(0)
    const [limit] = useState(20)

    const { data: columnsData } = useSWR(`/db/columns/${tablename}`, (key) => fetcher(key, BASE_URL.ems), {
        revalidateOnFocus: false
    })

    const { data: rowsData } = useSWR(columnsData ? `/db/rows/${tablename}?offset=${offset}&limit=${limit}` : null, (key) => fetcher(key, BASE_URL.ems), {
        revalidateOnFocus: false
    })

    return (
        <>
            {columnsData && rowsData && Array.isArray(columnsData) && Array.isArray(rowsData) && columnsData.length > 0 &&
                <CustomTable data={rowsData} columns={columnsData.map(column => (
                    {
                        name: column.column_name,
                        header: column.column_name,
                        type: 'string',
                    }
                ))} />
            }
        </>
    )
}

export default DBManager