import React from "react";
import PropTypes from "prop-types";
import selectedTheme from "../../../themes";
import { IconButton } from "../../Buttons/IconButton/IconButton";
import MailIcon from "@mui/icons-material/EmailOutlined";
import { Badge } from "@mui/material";
import { useState } from "react";
import PopoverComponent from "../../Popovers/PopoverComponent";
import { MyMessages } from "../../Popovers/MyMessages/MyMessages";
import { useLocation } from "react-router-dom";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

const MyMessagesButton = () => {
  const location = useLocation();
  const { t } = useTranslation();
  const [msgPopoverOpen, setMsgPopoverOpen] = useState(false);
  const [msgAnchorEl, setMsgAnchorEl] = useState(null);
  useEffect(() => {
    setMsgPopoverOpen(false);
  }, [location.pathname]);
  const openMsgPopover = (event) => {
    setMsgPopoverOpen(true);
    setMsgAnchorEl(event.currentTarget);
  };

  const closeMsgPopover = () => {
    setMsgPopoverOpen(false);
    setMsgAnchorEl(null);
  };
  return (
    <>
      <IconButton
        aria-label={t("header.myMessages")}
        onClick={openMsgPopover}
        style={{
          background: selectedTheme.colors.primaryIconBackgroundColor,
          color: selectedTheme.colors.primaryPurple,
        }}
      >
        <Badge color="primary">
          <MailIcon />
        </Badge>
      </IconButton>
      <PopoverComponent
        anchorEl={msgAnchorEl}
        open={msgPopoverOpen}
        onClose={() => {
          setMsgPopoverOpen(false);
          setMsgAnchorEl(null);
        }}
        content={<MyMessages closePopover={closeMsgPopover} />}
      />
    </>
  );
};

MyMessagesButton.propTypes = {
  onClick: PropTypes.func,
};

export default MyMessagesButton;
