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(-1);
  };

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

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

  return (
    <>
      <div className="absolute top-0 w-screen z-20 select-none pointer-events-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 grid grid-cols-12 select-none touch-none pointer-events-none`}
      >
        <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-semibold 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;