import { useState } from "react";
import ProfilePA from "@/components/icons/ProfilePA";
import LogoutP from "@/components/icons/LogoutP";
import CardDA from "@/components/icons/CardDA";
import { Button, Popover } from "@mui/material";
import Link from "next/link";
import ModalLogout from "./ModalLogout";

function DetailProfile({ anchorEl, setAnchorEl }) {
  const [modal, setModal] = useState(false);
  const handleClose = () => setAnchorEl(null);
  const closeModal = () => setModal(false);
  const openModal = () => setModal(true);

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;
  
  return (
    <>
      <ModalLogout open={modal} handleClose={closeModal} />
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
      >
        <div className="flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]">
          <Link href="/dashboard" className="w-full">
            <Button
              fullWidth
              variant="text"
              className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
            >
              <ProfilePA />
              پروفایل من
            </Button>
          </Link>
          <Link
            href={{
              pathname: "/dashboard",
              query: {
                sidebar: 2,
              },
            }}
            className="w-full"
          >
            <Button
              fullWidth
              variant="text"
              className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
            >
              <CardDA />
              تراکنش های من
            </Button>
          </Link>
          <Button
            fullWidth
            color="error"
            variant="contained"
            onClick={openModal}
            sx={{
              "&.MuiButtonBase-root": {
                paddingTop: "8px !important",
                paddingBottom: "8px !important",
              },
            }}
            className="!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]"
          >
            <LogoutP />
            خروج
          </Button>
        </div>
      </Popover>
    </>
  );
}

export default DetailProfile;