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";
import useWingSidebar from "../../store/useWingSidebar";
import { MobileModalWrapper } from "../modals/mobile/MobileModalWrapper";
import MasterplanFiltersModal from "../modals/mobile/MasterplanFiltersModal";

const ComplexTopPanel = () => {
  const { setModal } = useModal();
  const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
  const { setIsSidebar, isSidebar } = useWingSidebar();
  const navigate = useNavigate();

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

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

  const handleOnMobileFiltersClick = () => {
    setModal(
      <MobileModalWrapper>
        <MasterplanFiltersModal />
      </MobileModalWrapper>
    );
  };

  const handleOnBackClick = () => {
    if (isSidebar) {
      setIsSidebar(false);
    } else {
      navigate(-1);
    }
  };

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

    setIsFullscreen(!isFullscreen);
    if (!isFullscreen) {
      onFullscreen.enter();
    } else {
      onFullscreen.exit();
    }
  };

  const handleOnAboutComplexClick = () => {
    navigate(`../aboutComplex`);
  };

  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 sm:col-span-5 col-span-7">
          <Button
            icon={<LeftArrowSliderIcon />}
            buttonType="cta"
            onClick={handleOnBackClick}
          />
          <Button
            className="hidden lg:flex"
            icon={<FilterIcon />}
            buttonType="primary"
            text="Filters"
            onClick={handleOnFiltersClick}
          />
          <Button
            className="lg:hidden flex"
            icon={<FilterIcon />}
            buttonType="primary"
            text="Filters"
            onClick={handleOnMobileFiltersClick}
          />
          <Button
            icon={<InfoIcon />}
            buttonType="primary"
            text="About Complex"
            onClick={handleOnAboutComplexClick}
          />
        </div>
        <div className="flex flex-col sm:col-start-6 col-start-8 sm:col-span-4 col-span-4 text-white text-center items-start ">
          <div
            className={`text-center duration-300 ease-in-out transition-opacity hidden lg:block ${
              isSidebar ? "opacity-0" : "opacity-100"
            }`}
          >
            <h2 className="font-semibold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)] select-none">
              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>
        <div className="flex gap-2 col-span-1 col-start-12 justify-end">
          {isFullscreen ? (
            <Button
              buttonType="fab"
              icon={<ActiveResizeIcon />}
              onClick={handleOnFullScreenClick}
              isCircleRounded
            />
          ) : (
            <Button
              buttonType="fab"
              icon={<ResizeIcon />}
              onClick={handleOnFullScreenClick}
              isCircleRounded
            />
          )}
          <Button
            buttonType="fab"
            icon={<HintIcon />}
            onClick={handleOnHelpClick}
            isCircleRounded
          />
        </div>
      </div>
    </>
  );
};

export default ComplexTopPanel;