import FloatingActionButton from "./FloatingActionButton";
import PopoverWrapper from "./PopoverWrapper";
import MoreIcon from "../icons/MoreIcon";
import { useRef, useState } from "react";
import Button from "./Button";
import ChatFilledIcon from "../icons/ChatFilledIcon";
import UsersFilledIcon from "../icons/UsersFilledIcon";
import ShareFilledIcon from "../icons/ShareFilledIcon";
import CogFilledIcon from "../icons/CogFilledIcon";
import usePopupStore from "../../store/popupStore";
import useModalStore from "../../store/modalStore";
import ChatPopup from "../popups/ChatPopup";
import ParticipantsPopup from "../popups/ParticipantsPopup";
import SharePopup from "../popups/SharePopup";
import SettingsModal from "../modals/SettingsModal";
import clsx from "clsx";
import { useClickAway } from "@uidotdev/usehooks";
import type { Session } from "../../types/Session";

interface ControlsPopoverProps {
  session?: Session;
}

function ControlsPopover({ session }: ControlsPopoverProps) {
  const [isOpened, setIsOpened] = useState(false);

  const buttonRef = useRef<HTMLButtonElement>(null);

  const ref = useClickAway<HTMLDivElement>(() => setIsOpened(false));

  const { setPopup } = usePopupStore();
  const { setModal } = useModalStore();

  function handleClickOpenChatPopup() {
    setIsOpened(false);
    setPopup(<ChatPopup sessionId={session?.id} />);
  }

  function handleClickOpenParticipantsPopup() {
    setIsOpened(false);
    if (session) {
      setPopup(<ParticipantsPopup session={session} />);
    }
  }

  function handleClickOpenSharePopup() {
    setIsOpened(false);
    setPopup(
      <SharePopup link={`${window.location.origin}/sessions/${session?.id}`} />
    );
  }

  function handleClickOpenSettingsModal() {
    setIsOpened(false);
    setModal(<SettingsModal />);
  }

  return (
    <div className="order-3 2xl:hidden z-[9999]" ref={ref}>
      <FloatingActionButton
        ref={buttonRef}
        className={clsx(isOpened && "!bg-[#7B60F3]")}
        onClick={() => setIsOpened(!isOpened)}
      >
        <div className="text-white size-4">
          <MoreIcon />
        </div>
      </FloatingActionButton>
      <PopoverWrapper
        isOpened={isOpened}
        parentElRef={buttonRef}
        position="center"
        className="w-[248px]"
      >
        <Button
          variant="tertiary"
          className="w-full !justify-start"
          onClick={handleClickOpenChatPopup}
        >
          <div className="size-4">
            <ChatFilledIcon />
          </div>
          Чат
        </Button>
        <Button
          variant="tertiary"
          className="w-full !justify-start"
          onClick={handleClickOpenParticipantsPopup}
          disabled={!session}
        >
          <div className="size-4">
            <UsersFilledIcon />
          </div>
          Участники
        </Button>
        <Button
          variant="tertiary"
          className="w-full !justify-start"
          onClick={handleClickOpenSharePopup}
        >
          <div className="size-4">
            <ShareFilledIcon />
          </div>
          Пригласить
        </Button>
        <Button
          variant="tertiary"
          className="w-full !justify-start"
          onClick={handleClickOpenSettingsModal}
        >
          <div className="size-4">
            <CogFilledIcon />
          </div>
          Настройки
        </Button>
      </PopoverWrapper>
    </div>
  );
}

export default ControlsPopover;
