"use client";

import { useState } from "react";
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";

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-screen " : "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>
            <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>
        <div className="w-full relative h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px] mt-[24px]">
          <iframe
            src={`https://maps.google.com/maps?q=${data.map.latitude},${data.map.longitude}&z=14&output=embed`}
            className="w-full rounded-lg mt-4 h-full"
            referrerPolicy="no-referrer-when-downgrade"
            allowFullScreen=""
            loading="lazy"
          ></iframe>

          <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;