import { useState } from "react";

const accordionData = [
  { id: "bedrooms", icon: "Icon", title: "Bedrooms", content: "Bedroom content here..." },
  { id: "bathrooms", icon: "icon-shower", title: "Bathrooms", content: "Bathroom content here..." },
  { id: "kitchen", icon: "icon-kitchen-utensils", title: "Kitchen", content: "Kitchen content here..." },
  { id: "outdoor", icon: "icon-outdoor-space", title: "Outdoor Space", content: "Outdoor space content..." },
  { id: "amenities", icon: "icon-other-amenities", title: "Other Amenities", content: "Other amenities content..." },
];

const AmenitiesAccordion = ({ AmenitiesTabData, isCoLiving }: { AmenitiesTabData: any, isCoLiving?: boolean }) => {
  const [openId, setOpenId] = useState<string | null>(null);

  const toggle = (id: string) => {
    setOpenId((prevId) => (prevId === id ? null : id));
  };

  return (
    <div className="w-full flex flex-col gap-3 mt-4">
      {AmenitiesTabData?.map(({ propertyTypeFeatureData, propertyFeatureId, data, icon }: { propertyTypeFeatureData: any, propertyFeatureId: string, data: any[], icon: string }) => (
        <div key={propertyFeatureId} className="bg-bgColor rounded-[20px]">
          <button
            className="cursor-pointer w-full flex gap-2 items-center p-4 transition"
            onClick={() => toggle(propertyFeatureId)}
          >
            <i
              style={{
                WebkitMaskImage: propertyTypeFeatureData?.icon ? `url(${propertyTypeFeatureData?.icon})` : 'none',
                maskImage: propertyTypeFeatureData?.icon ? `url(${propertyTypeFeatureData?.icon})` : 'none',
              }}
              className={`Icon ${icon} !w-5 !h-5 !bg-black shrink-0`}></i>
            <div className="flex items-center gap-2">
              <span className="text-gray-800">{propertyTypeFeatureData?.title}</span>
              {(propertyTypeFeatureData?.slug === 'bedrooms' || propertyTypeFeatureData?.slug === 'bathroom') &&
                <span className="w-6 h-6 rounded-full bg-secondaryColor flex items-center justify-center text-white text-size-fs14 md:hidden">{data?.length}</span>
              }
            </div>
            <i className={`Icon IconDownArrow !bg-grey67 !w-4 !h-4 ml-auto ${openId === propertyFeatureId ? "-rotate-180" : ""}`}></i>
          </button>
          <div
            className={`overflow-hidden transition-[max-height] duration-200 ${openId === propertyFeatureId ? "max-h-full" : "max-h-0"
              }`}
          >
            <div className="pt-0 p-4">
              <>
                <div className="flex flex-col gap-4">
                  {data?.length === 0 && <p className="flex justify-center">No {propertyTypeFeatureData?.title} available</p>}
                  {data?.length > 0 && data?.map((item: any, index: number) => {
                    return (
                      <div key={index} className="w-full rounded-2xl xxl:rounded-[30px] bg-white p-2.5">
                        {(propertyTypeFeatureData?.slug === 'bedrooms' || propertyTypeFeatureData?.slug === 'bathroom') && !isCoLiving &&
                          (<div className="bg-secondaryColor p-3 mb-4 rounded-[20px] flex items-center justify-center gap-2">
                            {(propertyTypeFeatureData?.slug === 'bedrooms' || propertyTypeFeatureData?.slug === 'bathroom') && <span className={`w-6 h-6 rounded-full flex items-center justify-center bg-white text-secondaryColor`}>{index + 1}</span>}
                            <p className="!mb-0 text-white !font-fw600">{propertyTypeFeatureData?.title?.replace(/s$/, '')}</p>
                          </div>)}
                        {isCoLiving && (propertyTypeFeatureData?.slug === 'bedrooms' || propertyTypeFeatureData?.slug === 'bathroom' || propertyTypeFeatureData?.slug === 'kitchen') ?
                          <>
                            <h6 className="!mb-2 !font-fw700 fs-18">{'Private'}</h6>
                            {item?.private?.length === 0 && <p className="flex  !px-2.5 !pb-1.5 justify-center">No Amenities available</p>}
                            {item?.private?.length > 0 &&
                              <ul className={`flex flex-wrap gap-3  max-h-[125px] !px-2.5 !pb-1.5 overflow-y-auto`}>
                                {item?.private?.map((item: any, index: number) => (
                                  <li key={index} className="flex gap-2 items-center text-grey85 text-size-fs14 lg:text-size-fs16">
                                    <i className="Icon IconTick !bg-secondaryColor !w-[18px] !h-[18px] lg:!w-5 lg:!h-5"></i>
                                    {item?.title}
                                  </li>
                                ))
                                }
                              </ul>}
                            <h6 className="!mb-2 !font-fw700 fs-18">{'Shared'}</h6>
                            {item?.allAmenitiesData?.length === 0 && <p className="flex  !px-2.5 !pb-1.5 justify-center">No Amenities available</p>}
                            {item?.allAmenitiesData?.length > 0 &&
                              <ul className={`flex flex-wrap gap-3  max-h-[125px] !px-2.5 !pb-1.5 overflow-y-auto`}>
                                {item?.allAmenitiesData?.map((item: any, index: number) => (
                                  <li key={index} className="flex gap-2 items-center text-grey85 text-size-fs14 lg:text-size-fs16">
                                    <i className="Icon IconTick !bg-secondaryColor !w-[18px] !h-[18px] lg:!w-5 lg:!h-5"></i>
                                    {item?.title}
                                  </li>
                                ))
                                }
                              </ul>}
                          </>
                          :
                          <>
                            {item?.allAmenitiesData?.length === 0 && <p className="flex  !px-2.5 !pb-1.5 justify-center">No Amenities available</p>}
                            {item?.allAmenitiesData?.length > 0 &&
                              <ul className={`flex flex-wrap gap-3  max-h-[125px] !px-2.5 !pb-1.5 overflow-y-auto`}>
                                {item?.allAmenitiesData?.map((item: any, index: number) => (
                                  <li key={index} className="flex gap-2 items-center text-grey85 text-size-fs14 lg:text-size-fs16">
                                    <i className="Icon IconTick !bg-secondaryColor !w-[18px] !h-[18px] lg:!w-5 lg:!h-5"></i>
                                    {item?.title}
                                  </li>
                                ))
                                }
                              </ul>}
                          </>
                        }
                      </div>
                    )
                  })
                  }

                </div>
              </>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default AmenitiesAccordion;