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

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 ${
        isFullMode ? "" : "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 flex-col col-start-6 col-span-2 text-white text-center">
        <h2 className="font-bold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
          ROVE Home Marasi Drive
        </h2>
        <p className="text-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
          Select a wing
        </p>
      </div>
      <div className="flex gap-2 col-span-2 col-start-11 justify-end">
        {isFullMode ? (
          <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 ComplexTopPanel;