// ** React Imports
import { useState, SyntheticEvent, Fragment } from "react";

// ** Next Import
import { useRouter } from "next/router";

// ** MUI Imports
import Box from "@mui/material/Box";
import Menu from "@mui/material/Menu";
import Badge from "@mui/material/Badge";
import Avatar from "@mui/material/Avatar";
import MenuItem from "@mui/material/MenuItem";
import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button"
// ** Icon Imports
import Icon from "src/@core/components/icon";

// ** Context
import { useAuth } from "src/hooks/useAuth";

// ** Type Imports
import { Settings } from "src/@core/context/settingsContext";
import Select, { SelectChangeEvent } from '@mui/material/Select'
import { setCookie } from 'cookies-next';
import COMPANY_ID from 'src/constant/constant'
import USER_ROLE from "src/constant/UserRole";
interface Props {
  settings: Settings;
}

// ** Styled Components
const BadgeContentSpan = styled("span")(({ theme }) => ({
  width: 8,
  height: 8,
  borderRadius: "50%",
  backgroundColor: theme.palette.success.main,
  boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
}));

const UserDropdown = (props: Props) => {
  // ** Props
  const { settings } = props;

  // ** States
  const [anchorEl, setAnchorEl] = useState<Element | null>(null);

  // ** Hooks
  const router = useRouter();
  const { logout } = useAuth();

  // ** Vars
  const { direction } = settings;
  const [companyId, setCompanyId] = useState<string>('basic')

  const auth = useAuth()

  const handleDropdownOpen = (event: SyntheticEvent) => {
    setAnchorEl(event.currentTarget);
  };

  const handleDropdownClose = (url?: string) => {
    if (url) {
      router.push(url);
    }
    setAnchorEl(null);
  };

  const styles = {
    py: 2,
    px: 4,
    width: "100%",
    display: "flex",
    alignItems: "center",
    color: "text.primary",
    textDecoration: "none",
    "& svg": {
      mr: 2,
      fontSize: "1.375rem",
      color: "text.primary",
    },
  };

  const styledMenu = {
    py: 2,
    px: 4,
    width: "100%",
    display: "flex",
    alignItems: "center",
    color: "primary.main",
    textDecoration: "none",
    "& svg": {
      mr: 2,
      fontSize: "0.875rem",
      color: "#4C4E6461",
    },
  };
  const handleLogout = () => {
    logout();
    handleDropdownClose();
  };

  const changeCompanyId = (event: SelectChangeEvent) => {
    setCookie(COMPANY_ID, event.target.value)
    router.push('/schedule')
  }
  
  return (
    <Fragment>
      <Box sx={{ mr:5 }}>
        { auth.user?.role == USER_ROLE.GROUP_ADMIN && router.pathname == '/select-company' ?
          <Select
            fullWidth
            value={companyId}
            size="small"
            sx={{ mr:5 }}
            onChange={e => changeCompanyId(e)}
          >
            <MenuItem value='basic'>あさいち合同会社</MenuItem>
            <MenuItem value='company'>あさいち合同会社</MenuItem>
            <MenuItem value='enterprise'>あさいち合同会社</MenuItem>
            <MenuItem value='team'>あさいち合同会社</MenuItem>
          </Select>
          : null
        }
      </Box>
      <Badge
        overlap="circular"
        onClick={handleDropdownOpen}
        sx={{ ml: 2, cursor: "pointer" }}
        badgeContent={<BadgeContentSpan />}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
      >
        <Avatar
          alt="John Doe"
          onClick={handleDropdownOpen}
          sx={{ width: 40, height: 40 }}
          src="/images/avatars/image.png"
        />
      </Badge>
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={() => handleDropdownClose()}
        sx={{ "& .MuiMenu-paper": { width: 230, mt: 4 } }}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: direction === "ltr" ? "right" : "left",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: direction === "ltr" ? "right" : "left",
        }}
      >
        <MenuItem
          sx={{ p: 0 }}
          onClick={() => handleDropdownClose("/pages/user-profile/profile")}
        >
          <Box sx={styles}>山田さん</Box>
        </MenuItem>

        <MenuItem
          sx={{ p: 0}}
          onClick={() => handleDropdownClose("/pages/user-profile/profile")}
        >
          <Box sx={styledMenu}>
            <Icon icon="mdi-arrow-right"></Icon>
            <span>プライバシーポリシー</span>
          </Box>
        </MenuItem>
        <MenuItem
          sx={{ p: 0, color: "text.primary" }}
          onClick={() => handleDropdownClose("/apps/email")}
        >
          <Box sx={styledMenu}>
            <Icon icon="mdi-arrow-right" />
            お問い合わせ
          </Box>
        </MenuItem>
        <MenuItem
          sx={{
            py: 2,
            "& svg": { fontSize: "1.375rem", color: "text.primary !important" },
          }}
        >
          <Button onClick={handleLogout} sx={{ border: "1px solid #666CFF" }} >
            <Icon icon="mdi-arrow-left"/>
            ログアウト
          </Button>
        </MenuItem>
      </Menu>
    </Fragment>
  );
};

export default UserDropdown;