import { useState } from "react";
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";

const TopPanel = () => {
  const [isFullMode, setIsFullMode] = useState(false);
  const { setModal } = useModal();
  const { onFullscreen } = useFullScreen();

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

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

    setIsFullMode((prev) => !prev);
    if (!isFullMode) {
      onFullscreen.enter();
    } else {
      onFullscreen.exit();
    }
  };

  return (
    <div className="absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2">
      <Button
        buttonType="fab"
        icon={<ResizeIcon />}
        onClick={handleOnFullScreenClick}
      />
      <Button
        buttonType="fab"
        icon={<HintIcon />}
        onClick={handleOnHelpClick}
      />
    </div>
  );
};

export default TopPanel;
