import { Box, Tab, Tabs } from "@mui/material"
import { useState } from "react"
import ServersView from "../components/ServersView"
import ServerIpsView from "../components/ServerIpsView"
import ServerHardware from "../components/ServerHardware"
import ServerStorage from "../components/ServerStorages"
import { BarChart } from '@mui/x-charts/BarChart';

export default function Servers() {
    const [currentTab, setCurrentTab] = useState(0)

    const handleTabChange = (newValue: number) => {
        setCurrentTab(newValue);
    }

    interface TabPanelProps {
        children?: React.ReactNode;
        index: number;
        value: number;
    }

    function CustomTabPanel(props: TabPanelProps) {
        const { children, value, index, ...other } = props;

        return (
            <div
                role="tabpanel"
                hidden={value !== index}
                id={`simple-tabpanel-${index}`}
                aria-labelledby={`simple-tab-${index}`}
                {...other}
            >
                {value === index && <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>{children}</Box>}
            </div>
        );
    }

    return (
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%' }}>
            <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', height: '100%', p: '16px' }}>
                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                    <Tabs value={currentTab} onChange={(_, value) =>
                        handleTabChange(value)
                    } aria-label="basic tabs example">
                        <Tab label="Серверы" />
                        <Tab label="IP-адреса" />
                        <Tab label="Hardware" />
                        <Tab label="Storages" />
                    </Tabs>
                </Box>

                <CustomTabPanel value={currentTab} index={0}>
                    <ServersView />
                </CustomTabPanel>

                <CustomTabPanel value={currentTab} index={1}>
                    <ServerIpsView />
                </CustomTabPanel>

                <CustomTabPanel value={currentTab} index={2}>
                    <ServerHardware />
                </CustomTabPanel>

                <CustomTabPanel value={currentTab} index={3}>
                    <ServerStorage />
                </CustomTabPanel>

                <BarChart
                    xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
                    series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
                    width={500}
                    height={300}
                />
            </Box>
        </Box>
    )
}