import { useEffect, useRef } from "react";
import { locationService, userService } from "../services";
import showAboutSiteDialog from "./AboutSiteDialog";
import "../less/menu-btns-popup.less";

interface Props {
  shownStatus: boolean;
  setShownStatus: (status: boolean) => void;
}

const MenuBtnsPopup: React.FC<Props> = (props: Props) => {
  const { shownStatus, setShownStatus } = props;

  const popupElRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (shownStatus) {
      const handleClickOutside = (event: MouseEvent) => {
        if (!popupElRef.current?.contains(event.target as Node)) {
          event.stopPropagation();
        }
        setShownStatus(false);
      };
      window.addEventListener("click", handleClickOutside, {
        capture: true,
        once: true,
      });
    }
  }, [shownStatus]);

  const handleMyAccountBtnClick = () => {
    locationService.pushHistory("/setting");
  };

  const handleMemosTrashBtnClick = () => {
    locationService.pushHistory("/trash");
  };

  const handleAboutBtnClick = () => {
    showAboutSiteDialog();
  };

  const handleSignOutBtnClick = async () => {
    await userService.doSignOut();
    locationService.replaceHistory("/signin");
    window.location.reload();
  };

  return (
    <div className={`menu-btns-popup ${shownStatus ? "" : "hidden"}`} ref={popupElRef}>
      <button className="btn action-btn" onClick={handleMyAccountBtnClick}>
        <span className="icon">👤</span> Settings
      </button>
      <button className="btn action-btn" onClick={handleMemosTrashBtnClick}>
        <span className="icon">🗑️</span> Recycle Bin
      </button>
      <button className="btn action-btn" onClick={handleAboutBtnClick}>
        <span className="icon">🤠</span> About
      </button>
      <button className="btn action-btn" onClick={handleSignOutBtnClick}>
        <span className="icon">👋</span> Sign out
      </button>
    </div>
  );
};

export default MenuBtnsPopup;