IRTH-Touch/client/src/components/modals/mobile/MobileHelpModal.tsx

import { useSwipeable } from "react-swipeable";
import Button from "../../Button";
import CrossIcon from "../../icons/CrossIcon";
import { ISlider } from "../../../types/slide";
import { useState, useRef, useContext } from "react";
import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
import { MobileModalWrapperContext } from "./MobileModalWrapper";
import useModal from "../../../store/useModal";

const tipsSlides: ISlider[] = [
  {
    id: "tps-sld-1",
    src: "/images/masterplan/help/1.png",
    title: "1. Workspace",
    desc: "For more comfortable work with the general plan, size it to the full screen.",
  },
  {
    id: "tps-sld-2",
    src: "/images/masterplan/help/1.png",
    title: "2. Filter on the master plan",
    desc: "Filter the apartments in the project by required parameters.",
  },
  {
    id: "tps-sld-3",
    src: "/images/masterplan/help/1.png",
    title: "3. Take a closer look at the project",
    desc: "Learn more about the project, surrounding infrastructure and apartment features.",
  },
  {
    id: "tps-sld-4",
    src: "/images/masterplan/help/1.png",
    title: "4. Look for apartments",
    desc: "Use the search to select an apartment that suits you, add it to your favorites and compare.",
  },
];

const MobileHelpModal = () => {
  // const [imageWidth] = useState(0);
  const imageRef = useRef<HTMLImageElement>(null);
  const { setIsAnimate } = useContext(MobileModalWrapperContext);
  const [selectedImageIndex, setSelectedImageIndex] = useState(-1);
  const [rightImageOffset] = useState("");
  const { setModal } = useModal();

  const handlers = useSwipeable({
    onSwipedDown: () => handleOnCloseClick(),
    onSwipedLeft: next,
    onSwipedRight: prev,
  });

  const handleOnCloseClick = () => {
    if (setIsAnimate) {
      setIsAnimate(false);
      const timeout = setTimeout(() => {
        setModal(null);
        clearTimeout(timeout);
      }, 300);
    }
  };

  function next() {
    const lastIndex = tipsSlides.length - 2;

    if (selectedImageIndex === lastIndex) return;
    // setSelectedImageIndex((prev) => prev + 1);
  }

  function prev() {
    if (selectedImageIndex === -1) return;
    setSelectedImageIndex((prev) => prev - 1);
  }

  // useLayoutEffect(() => {
  //   const gapOffset = 45;

  //   const _rightImageOffset = `${
  //     (selectedImageIndex + 1) * (imageWidth + gapOffset)
  //   }px`;

  //   setRightImageOffset(_rightImageOffset);
  // }, [imageWidth, selectedImageIndex, imageRef?.current?.width]);

  return (
    <div
      className="bg-[#F3F3F2] rounded-ss-lg rounded-se-lg h-full p-6 flex flex-col justify-start"
      {...handlers}
    >
      <div className="flex justify-between pb-[66.5px] border-b">
        <h2 className="text-[#0D1922] text-subheadline-m font-semibold">
          Tips for working
        </h2>
        <Button
          buttonType="secondary"
          isCircleRounded
          icon={<CrossIcon />}
          className="text-[#0D1922B2]"
          onClick={handleOnCloseClick}
        />
      </div>
      <div className="relative col-span-full overflow-x-hidden flex h-[1884px] mt-[475.44px]  border-b flex-nowrap">
        <div
          className={`flex gap-4 w-full absolute h-fit transition-all duration-300 ease-in-out select-none`}
          style={{
            right: `${rightImageOffset}`,
          }}
        >
          {tipsSlides.map((image) => (
            <div
              key={image.id}
              className="flex flex-col justify-center items-center"
            >
              <img
                ref={imageRef}
                src={image.src}
                alt=""
                className="rounded-2xl object-fill pointer-events-none select-none min-w-[calc(100vw-135px)] h-[1423px] mb-[112.5px]"
              />
              <h2 className="text-[#0D1922] text-[56.25px] leading-[78.75px] font-semibold text-center mb-[45px]">
                {image.title}
              </h2>
              <p className="text-[#0D1922] text-[45px] leading-[56.25px] text-center w-[1125px]">
                {image.desc}
              </p>
            </div>
          ))}
        </div>
      </div>
      <div className="flex gap-8 justify-center mt-[475px] py-6">
        <Button
          icon={<LeftArrowSliderIcon />}
          buttonType="fab"
          className="text-black"
        />
        <div className="flex items-center gap-3">
          <div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
          <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
          <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
          <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
          <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
        </div>
        <Button
          icon={<RightArrowSliderIcon />}
          buttonType="fab"
          className="text-black"
        />
      </div>
    </div>
  );

  //   return <div className="absolute z-[99999901] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12 items-center">
  //   <div className="h-full col-span-3 col-start-10 bg-[#F3F3F2] py-6 px-6 flex flex-col justify-between items-center">
  //     <div className="flex flex-col gap-8">
  //       <div className="flex justify-between pb-4 border-b border-[#E2E2DC]">
  //         <h2 className="text-subheadline-m font-semibold">
  //           Tips for working
  //         </h2>
  //         <Button
  //           icon={<CrossIcon />}
  //           buttonType="fab"
  //           onClick={handleOnCloseClick}
  //           isCircleRounded
  //         />
  //       </div>
  //       <img
  //         src="/images/masterplan/help/1.png"
  //         alt="1"
  //         className="rounded-2xl"
  //       />
  //       <div className="flex flex-col gap-2 text-[#0D1922]">
  //         <h2 className="text-subheadline-m font-semibold">1. Workspace</h2>
  //         <p className="text-m">
  //           For more comfortable work with the general plan, size it to the
  //           full screen.
  //         </p>
  //       </div>
  //     </div>
  //     <div className="flex gap-8">
  //       <Button
  //         icon={<LeftArrowSliderIcon />}
  //         buttonType="fab"
  //         className="text-black"
  //       />
  //       <div className="flex items-center gap-3">
  //         <div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
  //         <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
  //         <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
  //         <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
  //         <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
  //       </div>
  //       <Button
  //         icon={<RightArrowSliderIcon />}
  //         buttonType="fab"
  //         className="text-black"
  //       />
  //     </div>
  //   </div>
  // </div>;
};

export default MobileHelpModal;