import {useState} from 'react';

// material-ui
import {
    Box,
    //Box,
    Tab, Tabs,
} from '@mui/material';
import MainCard from "../../components/MainCard";
import {useTheme} from "@mui/material/styles";
import LIONERDivisionIndex from "./LIONERDivisionIndex";
import SBUDivisionIndex from "./SBUDivisionIndex";
import {CategoryTabHeading} from "../../utils/ComboConst";

// ==============================|| DASHBOARD - DEFAULT ||============================== //


const CategoryPage = () => {
    const [value, setValue] = useState(0);//0 for unread, 1 for readed
    const theme = useTheme();
    const [tabData] = useState(CategoryTabHeading);

    //const subDivisionId = localStorage.getItem('subDivisionId');

    function TabPanel({children, value, index, ...other}) {
        return (
            <div role="tabpanel" hidden={value !== index} id={`event-tabpanel-${index}`}
                 aria-labelledby={`event-tab-${index}`}
                 style={{ backgroundColor: '#FAFAFB' }}
                 {...other}>
                {value === index && children}
            </div>
        );
    }

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };


    return (
        <MainCard elevation={0} border={false} content={false}>
            {
                <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
                    <Tabs
                        value={value}
                        onChange={handleChange}
                        aria-label="event tabs"
                    >
                        {tabData.map(data => (
                            <Tab
                                key={data.key}
                                sx={{
                                    display: 'flex',
                                    flexDirection: 'row',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    textTransform: 'capitalize'
                                }}
                                label={data.name}
                            />
                        ))}
                    </Tabs>
                </Box>
            }
            <TabPanel
                index={0}
                value={value}
                dir={theme.direction}
                key={0}
            >
                <LIONERDivisionIndex/>
            </TabPanel>
            <TabPanel
                index={1}
                value={value}
                dir={theme.direction}
                key={1}
            >
                <SBUDivisionIndex/>
            </TabPanel>
        </MainCard>
    );
};

export default CategoryPage;
