import { Dispatch, SetStateAction, useEffect } from "react";
import FullScreenIcon from "./icons/FullScreenIcon";
import Button from "./ui/Button";
import CloseFullscreenIcon from "./icons/CloseFullscreenIcon";
import { isMobileSafari } from "react-device-detect";

interface IFullScreenProps {
  onFullScreenChange: Dispatch<SetStateAction<boolean>>;
  onClick: () => void;
  isFullScreen: boolean;
}

function FullScreenButton({
  isFullScreen,
  onFullScreenChange,
  onClick: handleClick,
}: IFullScreenProps) {
  useEffect(() => {
    const handleFullScreenChange = () => {
      onFullScreenChange(!!document.fullscreenElement);
    };

    document.addEventListener("fullscreenchange", handleFullScreenChange);

    return () => {
      document.removeEventListener("fullscreenchange", handleFullScreenChange);
    };
  }, [onFullScreenChange]);

  if (isMobileSafari) return null;

  return (
    <Button
      onlyIcon
      size={innerWidth >= 768 ? "small" : "medium"}
      variant="secondary"
      onClick={handleClick}
    >
      <span className="2xl:size-[1.389vw] size-5">
        {isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
      </span>
    </Button>
  );
}

export default FullScreenButton;