import { useEffect, useState } from "react";
// import { marasiDriveMapCards } from "../data/aboutMarasiDrive";
// import CustomScrollBar from "./ui/ScrollBar";
// import { GoogleMapData } from "../data/googleMapData";
import GoogleMap from "./GoogleMap";
import Button from "./ui/Button";
import FullScreenIcon from "./icons/FullScreenIcon";
import useModalStore from "../stores/useModalStore";
import IGMapPoi from "../types/IGMapPoi";

function GoogleMapMobile({
  markers,
  mapCenter,
}: {
  markers?: IGMapPoi[];
  mapCenter: google.maps.LatLngLiteral;
}) {
  // const containerRef = useRef<HTMLDivElement>(null);
  const [mapActive, setMapActive] = useState(false);
  const { modal, setModal } = useModalStore();

  useEffect(() => {
    if (mapActive) setModal(<MapModal />);
    else setModal(null);
  }, [mapActive]);

  useEffect(() => {
    setMapActive(!!modal);
  }, [modal]);

  const MapModal = () => {
    return (
      <div
        className={`relative max-md:aspect-[360/640] md:max-2xl:aspect[1/1] max-2xl:mb-4 overflow-clip rounded-[4.444vw]  h-[calc(100dvh-100px)]`}
      >
        <GoogleMap
          mapCenter={mapCenter}
          markers={markers}
          mobileActive={true}
          mobile={true}
        />
      </div>
    );
  };

  return (
    <div className="md:hidden relative flex flex-col">
      {
        <div
          className={` relative max-md:aspect-[328/328] scroll-mt-10 md:max-2xl:aspect[1/1] transition-all  max-2xl:mb-4 overflow-clip rounded-[4.444vw]`}
        >
          <GoogleMap
            mapCenter={mapCenter}
            markers={markers}
            mobileActive={false}
            mobile={true}
          />
          <Button
            className={`absolute size-[11.111vw] right-[1.111vw] bottom-[1.111vw] `}
            onClick={() => setMapActive(true)}
          >
            <div className="size-[5.556vw] text-[#0D1922]">
              <FullScreenIcon />
            </div>
          </Button>
        </div>
      }
      {/* 
      <div
        ref={containerRef}
        className="flex flex-nowrap overflow-x-scroll scroll-pl-4 gap-x-[16px] overflow-y-hidden justify-start snap-x snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-[#FFFFFF] [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full -mx-4 px-4 "
      >
        {marasiDriveMapCards.map((card, index) => (
          <div key={index} className="snap-start">
            <div
              className={`rounded-[6.667vw] px-[4.444vw] py-[3.333vw] w-[51.111vw] aspect-[184/122] bg-[#F3F3F2] flex-shrink-0 flex flex-col justify-between relative md:max-2xl:w-[25vw] md:max-2xl:rounded-[3.125vw] md:max-2xl:px-[2.083vw] md:max-2xl:py-[1.563vw]`}
            >
              <div className="space-y-[0.278vw]">
                <p className="text-m">{card.title}</p>
                <p className="text-s text-[#73787C]">{`${card.mins} mins`}</p>
              </div>
              <img
                src={card.image}
                className="rounded-[0.278vw] size-[13.333vw] object-cover absolute bottom-[4.444vw] right-[3.333vw] md:max-2xl:size-[6.25vw] md:max-2xl:bottom-[1.563vw] md:max-2xl:right-[2.083vw]"
                alt={card.title}
              />
            </div>
          </div>
        ))}
      </div>
      <CustomScrollBar
        containerRef={containerRef}
        inlinePadding={16}
        trackStyle="min-2xl:hidden max-2xl:translate-y-5"
        thumbStyle="min-2xl:hidden"
      /> */}
    </div>
  );
}

export default GoogleMapMobile;