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(() => {
    onFullScreenChange(!!document.fullscreenElement);
    document.addEventListener("fullscreenchange", () =>
      onFullScreenChange(!!document.fullscreenElement)
    );

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

  if (isMobileSafari) return null;

  return (
    <Button
      onlyIcon
      size="small"
      variant="secondary"
      className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw] top-4 right-4"
      onClick={handleClick}
    >
      <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
        {isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
      </span>
    </Button>
  );
}

export default FullScreenButton;