import { Fragment, useState } from 'react';
import { Link } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import { getAuth, useAuthContext } from '@/auth';

import { toAbsoluteUrl } from '@/utils';
// import { DropdownUserLanguages } from './DropdownUserLanguages';
import { KeenIcon } from '@/components';
import {
  MenuItem,
  MenuLink,
  MenuSub,
  MenuTitle,
  MenuSeparator,
  MenuArrow,
  MenuIcon
} from '@/components/menu';
import { Alert, Button, Dialog, DialogContent } from '@mui/material';
import { DialogFooter, DialogHeader } from '@/components/ui/dialog';

interface IDropdownUserProps {
  menuItemRef: any;
}

// const cachedUser = getAuth()?.user;
// console.log('cachedUser :', cachedUser);
// const parsedUser = cachedUser ? cachedUser : null;

const DropdownUser = ({ menuItemRef }: IDropdownUserProps) => {
  const { logout, auth } = useAuthContext();
  const [showLogoutDialog, setShowLogoutDialog] = useState(false);

  const handleLogout = () => {
    setShowLogoutDialog(false); // Tutup dialog
    logout(); // Panggil fungsi logout
  };

  const buildHeader = () => {
    return (
      <div className="flex items-center justify-between px-5 py-1.5 gap-1.5">
        <div className="flex items-center gap-2">
          {/* <img
            className="size-9 rounded-full border-2 border-success"
            src={toAbsoluteUrl('/media/avatars/300-2.png')}
            alt=""
          /> */}
          <div className="flex flex-col">
            <p className="text-[14px] text-gray-800 font-semibold">{auth?.user.name}</p>
            <p className="text-xs text-gray-600 hover:text-primary font-medium leading-none">
              {auth?.user.email}
            </p>
          </div>
        </div>
      </div>
    );
  };

  const buildMenu = () => {
    return (
      <Fragment>
        <MenuSeparator />
        <div className="flex flex-col">
          <MenuItem>
            <MenuLink path="/account/home/user-profile">
              <MenuIcon>
                <KeenIcon icon="profile-circle" />
              </MenuIcon>
              <MenuTitle>
                <FormattedMessage id="USER.MENU.MY_PROFILE" />
              </MenuTitle>
            </MenuLink>
          </MenuItem>
          {/* <DropdownUserLanguages menuItemRef={menuItemRef} /> */}
          <MenuSeparator />
        </div>
      </Fragment>
    );
  };

  const buildFooter = () => {
    return (
      <div className="flex flex-col">
        <div className="menu-item px-4 py-1.5">
          <a
            onClick={() => setShowLogoutDialog(true)}
            className="btn btn-sm btn-light justify-center"
          >
            <FormattedMessage id="USER.MENU.LOGOUT" />
          </a>
        </div>
      </div>
    );
  };

  return (
    <MenuSub
      className="menu-default light:border-gray-300 w-[200px] md:w-[250px]"
      rootClassName="p-0"
    >
      {buildHeader()}
      {buildMenu()}
      {buildFooter()}

      <Dialog open={showLogoutDialog} onClose={(open) => setShowLogoutDialog(false)}>
        <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
          <DialogHeader className="p-0 border-0 block">
            <Alert severity="warning" variant="filled">
              <h3 className="text-lg">Are you sure?</h3>
              <span className="text-sm">You are about to log out!</span>
            </Alert>
          </DialogHeader>
          <DialogFooter className="flex justify-end items-center gap-4 mt-3">
            <Button
              variant={'outlined'}
              onClick={() => setShowLogoutDialog(false)}
              style={{ color: 'grey', borderColor: 'grey' }}
            >
              Cancel
            </Button>
            <Button variant="outlined" color="error" onClick={handleLogout}>
              Logout
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </MenuSub>
  );
};

export { DropdownUser };
