import PropTypes from 'prop-types';
import {useEffect, useState} from 'react';

// material-ui
import { useTheme } from '@mui/material/styles';
import {
    Box,
    List,
    ListItemButton,
    ListItemIcon,
    ListItem,
    ListItemText,
    Typography,
    ListItemSecondaryAction,
    Switch
} from '@mui/material';

// assets
import SmsOutlinedIcon from '@mui/icons-material/SmsOutlined';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
//import {POST_SEARCH_TEMPLATE_PATH, VALIDATE_TEMPLATE_NAME_PATH} from "../../../../../utils/ApiPathConst";
import * as React from "react";
import {ChangePasswordWindow} from "./ChangePasswordWindow";
import axios from "axios";
import {apiPath, getUserData} from "../../../../../auth/utils";
import {GET_USER_REMINDER_FLAG, SET_USER_REMINDER_FLAG} from "../../../../../utils/ApiPathConst";
import {notifySaveSuccess} from "../../../../../utils/CommonFunction";
import {LIONER_FORM_THEME, LIONER_NAV_THEME} from "../../../../../themes/themeConst";
import {ThemeProvider} from "@emotion/react";
import {isObjEmpty} from "../../../../../utils/Utils";
import {useNavigate} from "react-router-dom";
//import axios from "axios";
//import UploadContext from "../../../../../components/UploadProvider";

// ==============================|| HEADER PROFILE - PROFILE TAB ||============================== //

const ProfileTab = () => {
    // ==============================|| NEW TEMPLATE WINDOW RELATED ||============================== //
    const [isTempWindowOpen, setIsTempWindowOpen] = React.useState(false);

    //const { setIsUploading } = useContext(UploadContext);

    const handleTempClose = (event, reason) => {
        console.log(reason);
        //if (reason && reason === "backdropClick")
        //    return;
        setIsTempWindowOpen(false);
    };

// ==============================|| NEW TEMPLATE WINDOW RELATED ||============================== //

  const theme = useTheme();
  const navigate = useNavigate()
  const [isReceiveNotification, setIsReceiveNotification] = useState(false);
  const isLotusUser = localStorage.getItem('lotusNotesUser') === "true";

  const [selectedIndex, setSelectedIndex] = useState(null);
  const handleListItemClick = (event, index) => {
      if(index === 0){
          setIsTempWindowOpen(true);
      }
      setSelectedIndex(index);
  };

    useEffect(() => {
        //if state data are ready and assign to different field
        const userData = getUserData();
        if(isObjEmpty(userData)){
            navigate('/login');
        }
        // axios.get(`${apiPath}${GET_USER_REMINDER_FLAG}/${userData.id}`)
        //     .then((response) => {
        //         if (response.status === 200) {
        //             setIsReceiveNotification(response.data.isReminder);
        //         }
        //     })
        //     .catch(error => {
        //         console.log(error);
        //         return false;
        //     });
    }, []);

  const handleSwitchToggle = () => {
      updateIsReceiveNotification(!isReceiveNotification);
  };

  const updateIsReceiveNotification = (flag) =>{
      setIsReceiveNotification(flag);
      const userData = getUserData();
      axios.post(`${apiPath}${SET_USER_REMINDER_FLAG}/${userData.id}/${flag}`)
          .then((response) => {
              if (response.status === 204) {
                  notifySaveSuccess();
              }
          })
          .catch(error => {
              console.log(error);
              return false;
          });
  }
  return (
      <Box>
          <ThemeProvider theme={LIONER_NAV_THEME}>
          <Typography variant="subtitle2" color="textSecondary" sx={{ml:2, mt:1,mb:1}}>
              Account Settings
          </Typography>
          <List component="nav" sx={{ p: 0, '& .MuiListItemIcon-root': { minWidth: 32, color: theme.palette.grey[500] } }}>
              {
                  isLotusUser ?
                      <Box/> :
                  <ListItemButton selected={selectedIndex === 0} onClick={(event) => handleListItemClick(event, 0)}>
                      <ListItemIcon>
                          <LockOutlinedIcon />
                      </ListItemIcon>
                      <ListItemText primary="Change Password" />
                  </ListItemButton>
              }
              {/* <ListItem selected={selectedIndex === 1} onClick={(event) => handleListItemClick(event, 1)}>
                  <ListItemIcon>
                      <SmsOutlinedIcon />
                  </ListItemIcon>
                  <ListItemText primary="Reminder" />
                  <ListItemSecondaryAction>
                      <Switch checked={isReceiveNotification} onChange={handleSwitchToggle} />
                  </ListItemSecondaryAction>
              </ListItem> */}
          </List>
              <ThemeProvider theme={LIONER_FORM_THEME}>
                  <ChangePasswordWindow
                      isWindowOpen={isTempWindowOpen}
                      title={"Change Password"}
                      onNormalClose={handleTempClose}
                      onConfirmClose={handleTempClose}
                      isForce={false}
                  />
              </ThemeProvider>
          </ThemeProvider>
      </Box>
  );
};

ProfileTab.propTypes = {
  handleLogout: PropTypes.func
};

export default ProfileTab;
