import { useState } from "react";
import { useNavigate } from "react-router-dom";
import useModal from "../../store/useModal";
import Button from "../Button";
import FilterIcon from "../icons/FilterIcon";
import HintIcon from "../icons/HintIcon";
import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
import ResizeIcon from "../icons/ResizeIcon";
import HelpModal from "../modals/HelpModal";
import MasterplanFilters from "../modals/MasterplanFilters";
import InfoIcon from "../icons/InfoIcon";
import useFullScreen from "../../store/useFullScreen";

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

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

  const handleOnFiltersClick = () => {
    setModal(<MasterplanFilters />);
  };

  const handleOnBackClick = () => {
    navigate("../masterplan");
  };

  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 grid grid-cols-12">
      <div className="flex gap-2 col-span-3">
        <Button
          icon={<LeftArrowSliderIcon />}
          buttonType="cta"
          onClick={handleOnBackClick}
        />
        <Button
          icon={<FilterIcon />}
          buttonType="primary"
          text="Filters"
          onClick={handleOnFiltersClick}
        />
        <Button icon={<InfoIcon />} buttonType="primary" text="About Complex" />
      </div>
      <div className="flex gap-2 col-span-2 col-start-11 justify-end">
        <Button
          buttonType="fab"
          icon={<ResizeIcon />}
          onClick={handleOnFullScreenClick}
        />
        <Button
          buttonType="fab"
          icon={<HintIcon />}
          onClick={handleOnHelpClick}
        />
      </div>
    </div>
  );
};

export default ComplexTopPanel;
