"use client";

import { useState } from "react";
import dynamic from "next/dynamic";
import { Button } from "@mui/material";
import ArrowBottomGrayD from "@/components/icons/ArrowBottomGrayD";
import ModalOpenLocation from "@/app/component/openLocation";
import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
import RoutingC from "@/components/icons/RoutingC";

// Leaflet به window نیاز دارد → فقط کلاینت
const MapView = dynamic(() => import("./MapView"), { ssr: false });

function Item({ data }) {
  const [isOpen, setIsOpen] = useState(false);

  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <>
      <a
        id="location"
        className="absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]"
      ></a>
      <Button
        variant="texts"
        onClick={() => setIsOpen(!isOpen)}
        className="!px-[2px] !py-[4px] !flex !items-center !justify-between !w-full"
      >
        <p className="text-[#616161] text-[16px] font-medium">{data.name}</p>
        <div
          className={` transition-all duration-500 ${isOpen ? "rotate-180" : "rotate-0"} `}
        >
          <ArrowBottomGrayD />
        </div>
      </Button>
      <div
        className={` overflow-hidden transition-all duration-500 ${isOpen ? "max-h-[800px] " : "max-h-0"} `}
      >
        <div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
          <p className="text-[#525252] text-[16px] font-normal">
            آدرس: {data.address}
          </p>
          <div className="flex w-full items-center justify-between">
            <p className="text-[#525252] text-[16px] font-normal">
              تلفن: {data.telephone}
            </p>
            {data?.map?.latitude && data?.map?.longitude && (
              <ModalOpenLocation
                open={open}
                data={data}
                setOpen={setOpen}
                handleClose={handleClose}
              >
                <Button
                  className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
                  onClick={handleOpen}
                  variant="outlined"
                >
                  <RoutingC />
                  مسیریابی
                </Button>
              </ModalOpenLocation>
            )}
          </div>
        </div>
        {isOpen && data?.map?.latitude && data?.map?.longitude && (
          <div className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]">
            <MapView
              latitude={data.map.latitude}
              longitude={data.map.longitude}
            />

            <ModalOpenLocation
              open={open}
              data={data}
              setOpen={setOpen}
              handleClose={handleClose}
            >
              <Button
                className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-[4px] !border !border-[#5559CE] !py-2 !px-3 !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)] !gap-[8px] !text-[#FAFAFA] !text-[14px] !font-medium"
                onClick={handleOpen}
              >
                <RoutingWhiteC />
                مسیریابی
              </Button>
            </ModalOpenLocation>
          </div>
        )}
      </div>
    </>
  );
}

export default Item;