import {useState} from 'react';

// material-ui
import {
    Box,
    CardContent,
    //Box,
    Grid,  Tab, Tabs,
} from '@mui/material';
import MainCard from "../../components/MainCard";
import {useTheme} from "@mui/material/styles";
import InnerTab from ".//InnerTab";

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


const ThreeLayerTabPage = () => {
    const [value, setValue] = useState(0);
    const theme = useTheme();

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


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

    return (
        <MainCard elevation={0} border={false} content={false}>
            <CardContent sx={{ px: 2.5, pt: 2 }}>
                <Grid container justifyContent="space-between" alignItems="center">
                </Grid>
            </CardContent>
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                <Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label="profile tabs">
                    <Tab
                        sx={{
                            display: 'flex',
                            flexDirection: 'row',
                            justifyContent: 'center',
                            alignItems: 'center',
                            textTransform: 'capitalize'
                        }}
                        label="Test"
                    />
                    <Tab
                        sx={{
                            display: 'flex',
                            flexDirection: 'row',
                            justifyContent: 'center',
                            alignItems: 'center',
                            textTransform: 'capitalize'
                        }}
                        label="Test"
                    />
                </Tabs>
            </Box>
            <TabPanel value={value} index={0} dir={theme.direction}>
                1
                <InnerTab selectedPage={1}/>
            </TabPanel>
            <TabPanel value={value} index={1} dir={theme.direction}>
                2
                <InnerTab selectedPage={2}/>
            </TabPanel>
        </MainCard>
    );
};

export default ThreeLayerTabPage;
