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";

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


const InnerInnerTab = ({selectedPage, selectedInnerPage, awardData}) => {
    const [value, setValue] = useState(0);
    const theme = useTheme();

    function TabPanel({ children, value, index, ...other }) {
        return (
            <div role="tabpanel" hidden={value !== index} id={`award-tabpanel-${index}`} aria-labelledby={`award-tab-${index}`} {...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', height: '100vh'}}>
                <Tabs value={value} onChange={handleChange} aria-label="event tabs">
                    {awardData.map(data => (
                        <Tab
                            key={data.key}
                            sx={{
                                display: 'flex',
                                flexDirection: 'row',
                                justifyContent: 'center',
                                alignItems: 'center',
                                textTransform: 'capitalize'
                            }}
                            label={data.name}
                        />
                    ))}
                </Tabs>
            </Box>
            {awardData.map(data => (
                <TabPanel
                    index={data.key-1}
                    value={value}
                    dir={theme.direction}
                    key={data.key}
                >
                    {selectedPage}-{selectedInnerPage}-{data.key}
                </TabPanel>
            ))}
        </MainCard>
    );

};

export default InnerInnerTab;
