import {useEffect, 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 ReminderTable from "./ReminderTable";
import axios from "axios";
import {apiPath, getUserData} from "../../auth/utils";
import {GET_TODO_ANNOUNCEMENT_LIST, GET_TODO_APPLICATION_LIST} from "../../utils/ApiPathConst";

import {useNavigate} from "react-router-dom";
import {ReminderTabHeading} from "../../utils/ComboConst";

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


const InnerTab = ({isReminder}) => {
    const [value, setValue] = useState(0);//0 for unread, 1 for readed
    const theme = useTheme();
    const [tabData] = useState(ReminderTabHeading);
    const [reminderList, setReminderList] = useState([]);
    const navigate = useNavigate();

    //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}`} {...other}>
                {value === index && children}
            </div>
        );
    }

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

    useEffect(() => {
        fetchList(value);
    },[]);

    function fetchList (curValue){
        const userData = getUserData();
        if(userData === null){
            navigate('/login');
            window.location.reload();
        }
        //value 0 for unread, 1 for read
        axios.get(`${apiPath}${isReminder? GET_TODO_APPLICATION_LIST : GET_TODO_ANNOUNCEMENT_LIST}/${userData.id}/${curValue !== 0}`,{
        })
            .then((response) => {
                if (response.status === 200) {
                    setReminderList(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    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>
            }
            {tabData.map(data => (
                <TabPanel
                    index={data.key-1}
                    value={value}
                    dir={theme.direction}
                    key={data.key}
                >
                    <ReminderTable
                        isReaded={data.key !== 1}
                        recordList={reminderList}
                        fetchList={fetchList}
                        value={value}
                        isReminder={isReminder}
                    />
                </TabPanel>
            ))}
        </MainCard>
    );
};

export default InnerTab;
