import useFullScreen from "../../store/useFullScreen";
import useModal from "../../store/useModal";
import Button from "../Button";
import HintIcon from "../icons/HintIcon";
import ResizeIcon from "../icons/ResizeIcon";
import HelpModal from "../modals/HelpModal";
import ActiveResizeIcon from "../icons/ActiveResizeIcon";

const TopPanel = () => {
  const { setModal } = useModal();
  const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();

  const handleOnHelpClick = () => {
    setModal(<HelpModal />);
  };

  const handleOnFullScreenClick = () => {
    if (!onFullscreen) return;

    setIsFullscreen(!isFullscreen);
    if (!isFullscreen) {
      onFullscreen.enter();
    } else {
      onFullscreen.exit();
    }
  };

  return (
    <>
      <div className="absolute top-0 w-screen z-10 select-none pointer-events-none touch-none">
        <img src="/images/top_shadow.png" className="w-screen" alt="" />
      </div>
      <div
        className={`absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`}
      >
        {isFullscreen ? (
          <Button
            buttonType="fab"
            icon={<ActiveResizeIcon />}
            onClick={handleOnFullScreenClick}
          />
        ) : (
          <Button
            buttonType="fab"
            icon={<ResizeIcon />}
            onClick={handleOnFullScreenClick}
          />
        )}
        <Button
          buttonType="fab"
          icon={<HintIcon />}
          onClick={handleOnHelpClick}
        />
      </div>
    </>
  );
};

export default TopPanel;