import FloatingActionButton from "./FloatingActionButton";
import Popover from "./Popover";
import MoreIcon from "../icons/MoreIcon";
import { useEffect, 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";

function ControlsPopover() {
  const [isOpened, setIsOpened] = useState(false);
  const buttonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
      if (
        buttonRef.current &&
        !buttonRef.current.contains(event.target as Node)
      ) {
        setIsOpened(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    document.addEventListener("touchstart", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      document.removeEventListener("touchstart", handleClickOutside);
    };
  }, []);

  return (
    <div className="2xl:hidden order-3 relative">
      <FloatingActionButton
        ref={buttonRef}
        className="!bg-[#7B60F3]"
        onClick={() => setIsOpened(!isOpened)}
      >
        <div className="size-4 text-white">
          <MoreIcon />
        </div>
      </FloatingActionButton>
      <Popover
        isOpened={isOpened}
        buttonRef={buttonRef}
        className="w-[248px] bottom-[72px]"
      >
        <Button variant="tertiary" className="w-full !justify-start">
          <div className="size-4">
            <ChatFilledIcon />
          </div>
          Чат
        </Button>
        <Button variant="tertiary" className="w-full !justify-start">
          <div className="size-4">
            <UsersFilledIcon />
          </div>
          Участники
        </Button>
        <Button variant="tertiary" className="w-full !justify-start">
          <div className="size-4">
            <ShareFilledIcon />
          </div>
          Пригласить
        </Button>
        <Button variant="tertiary" className="w-full !justify-start">
          <div className="size-4">
            <CogFilledIcon />
          </div>
          Настройки
        </Button>
      </Popover>
    </div>
  );
}

export default ControlsPopover;