IRTH-Touch/client/src/components/virtualTour/VirtualTourSidebar.tsx

import { useState } from "react";
import useSphere from "../../store/useSphere";
import { IAppartmentComplex, ISphere } from "../../types/apartmentSphere";
import Button from "../Button";
import BookingIcon from "../icons/BookingIcon";
import ChevronDownIcon from "../icons/ChevronDownIcon";
import HeartIcon from "../icons/Heart";
import MapVectorIcon from "../icons/MapVectorIcon";
import useCompass from "../../store/useCompass";
import LeftArrowIcon from "../icons/LeftArrowIcon";
import InfoIcon from "../icons/InfoIcon";
import { useNavigate } from "react-router-dom";
import useModal from "../../store/useModal";
import { SendEnquiryModal } from "../modals/SendEnquryModal";

interface VirtualTourSidebarProps {
  currentAppartment: null | IAppartmentComplex;
}

const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
  const { currentCompassRotate } = useCompass();
  const [isActive, setIsActive] = useState(false);
  const { setSelectedSphere, selectedSphere } = useSphere();
  const { setModal } = useModal();
  const navigate = useNavigate();

  const handleOnShowClick = () => {
    setIsActive((prev) => !prev);
  };

  const handleOnLabelClick = (sphere: ISphere) => {
    setSelectedSphere(sphere);
  };

  const handleOnBackClick = () => {
    navigate(-1);
  };

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

  const handleOnSendEnquiryClick = () => {
    setModal(<SendEnquiryModal />);
  };

  return (
    <div className="absolute w-screen h-screen grid z-[99999999] pointer-events-none select-none">
      <div className="h-screen py-[72px] px-3 w-[360px]">
        <div className="bg-white w-full rounded-2xl p-5 flex flex-col relative rounded-ee-none">
          <div className="flex items-center justify-between pb-[18px] border-b gap-4">
            <Button
              icon={<LeftArrowIcon />}
              buttonType="secondary"
              className="w-fit"
              onClick={handleOnBackClick}
            />
            <p className="text-[#0D1922] font-semibold text-subheadline-s leading-6 text-left">
              1 BR Squared, 609 Sqft
            </p>
          </div>
          <div className="pt-3">
            <div className="flex gap-2 items-center">
              <div className="flex flex-col">
                <p className="text-[#00BED7] text-caption-m font-medium">
                  Rove Home Marasi Drive{" "}
                </p>
                <div className="text-[#73787C] flex gap-2 items-center w-fit pt-1">
                  <p className="text-caption-m font-semibold leading-4">
                    East Wing
                  </p>
                  <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
                  <p className="text-caption-m font-semibold leading-4">
                    Floor 11
                  </p>
                  <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
                  <p className="text-caption-m font-semibold leading-4">
                    № 213
                  </p>
                </div>
              </div>
            </div>
            <div
              className={`transition-all duration-700 ease-in-out ${
                !isActive ? "max-h-0 opacity-0" : "max-h-screen opacity-100"
              }`}
            >
              <div
                className={`${
                  isActive ? "my-4" : ""
                } relative flex justify-center`}
              >
                <img
                  src={currentAppartment?.map}
                  alt=""
                  className="max-h-[300px]"
                />
                <div
                  className="absolute"
                  style={{
                    top: `${selectedSphere?.mapPosition[1]}px`,
                    left: `${selectedSphere?.mapPosition[0]}px`,
                    transform: `rotate(${-currentCompassRotate + 90}deg)`,
                  }}
                >
                  <MapVectorIcon />
                </div>
              </div>
              <div className="pt-4 border-t">
                <div className="flex flex-col gap-3">
                  <div className="flex justify-between text-m">
                    <p className="text-[#73787C]">Size</p>
                    <p className="text-[#0D1922]">609 Sqft</p>
                  </div>
                  <div className="flex justify-between text-m">
                    <p className="text-[#73787C]">Status</p>
                    <p className="text-[#0D1922]">Available</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="flex flex-col">
              <h2 className="text-subheadline-s font-semibold text-[#00BED7] pt-4">
                AED 1,668,888
              </h2>
              <div className="flex gap-2 pt-4 ">
                <Button
                  icon={<BookingIcon />}
                  text="Send Enquiry"
                  buttonType="cta"
                  className="flex-1 flex items-center justify-center"
                  onClick={handleOnSendEnquiryClick}
                />
                <Button
                  icon={<InfoIcon />}
                  buttonType="secondary"
                  onClick={handleAboutComplexClick}
                />
                <Button icon={<HeartIcon />} buttonType="secondary" />
              </div>
            </div>
          </div>
          <div className="h-14 absolute -bottom-14 left-0 w-full  flex justify-between">
            <div className="flex gap-1 py-2 items-start flex-wrap pr-[9px]">
              {currentAppartment &&
                currentAppartment.spheres.map((sphere) => {
                  return (
                    <div
                      onClick={() => handleOnLabelClick(sphere)}
                      className={`font-semibold text-caption-s py-0.5 px-2 w-fit rounded-full cursor-pointer pointer-events-auto select-none text-white ${
                        selectedSphere?.id === sphere.id
                          ? "bg-[#00BED7]"
                          : "bg-[#0D192266]"
                      }`}
                      key={sphere.id}
                    >
                      {sphere.roomType}
                    </div>
                  );
                })}
            </div>
            <div
              onClick={handleOnShowClick}
              className="transition-all duration-300 bg-[#FFFFFFCC] px-4 py-3 w-fit h-12 rounded-ee-lg rounded-es-lg select-none cursor-pointer pointer-events-auto items-start border border-t-[#0D1922B2] active:border-[#00BED7] hover:bg-[#FFFFFF] text-[#0D1922B2] hover:text-[#0D1922]"
            >
              <div className="flex justify-center items-center gap-2">
                <div className="relative">
                  <div
                    className={`transition-opacity duration-300 ${
                      !isActive ? "opacity-100" : "opacity-0"
                    }`}
                  >
                    Show
                  </div>
                  <div
                    className={`transition-opacity duration-300 absolute top-0 ${
                      !isActive ? "opacity-0" : "opacity-100"
                    }`}
                  >
                    Hide
                  </div>
                </div>
                <ChevronDownIcon
                  className={`transition-all duration-300 ${
                    !isActive ? "rotate-0" : "rotate-180"
                  }`}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default VirtualTourSidebar;