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";

function ControlsPopover() {
  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 />);
  }

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

  function handleClickOpenSharePopup() {
    setIsOpened(false);
    setPopup(<SharePopup link="https://estate.stream/ahdy12jdco1" />);
  }

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

  return (
    <div className="order-3 2xl:hidden" 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}
        >
          <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;