// 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 useFullScreen from "../../store/useFullScreen";
import ActiveResizeIcon from "../icons/ActiveResizeIcon";

const VirtualTourTopPanel = () => {
  // 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-[62px] left-0 z-[99999998] w-full p-4 grid grid-cols-12 select-none touch-none pointer-events-none`}
      >
        <div className="flex gap-2 col-span-1 col-start-12 justify-end">
          {isFullscreen ? (
            <Button
              buttonType="fab"
              icon={<ActiveResizeIcon />}
              onClick={handleOnFullScreenClick}
            />
          ) : (
            <Button
              buttonType="fab"
              icon={<ResizeIcon />}
              onClick={handleOnFullScreenClick}
            />
          )}
          <Button
            buttonType="fab"
            icon={<HintIcon />}
            // onClick={handleOnHelpClick}
          />
        </div>
      </div>
    </>
  );
};

export default VirtualTourTopPanel;