'use client'
import React, { useEffect, useMemo, useState } from "react";
import AmenitiesCards from "../AmenitiesCards";
import CoLivingAmenitiesCards from "../AmenitiesCards/CoLivingAmenitiesCards";
import styles from "./CommonTabs.module.scss";

const CommonTabs = ({ AmenitiesTabData, isCoLiving }: { AmenitiesTabData: any, isCoLiving?: boolean }) => {

  const filteredTabData = useMemo(() => {
    if (isCoLiving) {
      return AmenitiesTabData.filter(
        (tab: any) => tab?.propertyTypeFeatureData?.slug !== "bedrooms"
      );
    }
    return AmenitiesTabData;
  }, [AmenitiesTabData, isCoLiving]);

  const firstTabId = 0;
  const lastTabId = filteredTabData.length - 1;
  const [activeTab, setActiveTab] = useState(0);
  const [activeTabData, setActiveTabData] = useState(filteredTabData[0]);

  useEffect(() => {
    setActiveTab(0);
    setActiveTabData(filteredTabData[0]);
  }, [filteredTabData]);

  return (
    <div className={`${styles.CommonTabsWrapper}`}>
      <div className="flex flex-col gap-0">
        {/* Tabs */}
        <div className="commonTabsButtonWrap flex items-end w-full gap-2 xl:gap-4">
          {filteredTabData && filteredTabData?.map((tab: any, index: number) => (
            <button
              key={index}
              onClick={() => { setActiveTabData(filteredTabData[index]); setActiveTab(index) }}
              className={`commonTabsButton cursor-pointer flex flex-col xl:flex-row w-full items-center justify-center gap-1 xl:gap-2 px-1.5 py-2 xl:px-4 xl:py-4 rounded-tl-[30px] rounded-tr-[30px]
                  ${activeTab === index
                  ? `bg-bgColor text-secondaryColor ${styles.activeTab}`
                  : "text-grey344Color border-transparent bg-white"
                }`}
            >
              <i
                style={{
                  WebkitMaskImage: tab?.propertyTypeFeatureData?.icon ? `url(${tab?.propertyTypeFeatureData?.icon})` : 'none',
                  maskImage: tab?.propertyTypeFeatureData?.icon ? `url(${tab?.propertyTypeFeatureData?.icon})` : 'none',
                }}
                className={`Icon ${tab.icon} !w-5.5 !h-5.5 xl:!w-6 xl:!h-6 !bg-grey344Color ${activeTab === index ? `!bg-secondaryColor` : ""
                  }`}
              ></i>
              <div className="flex items-center gap-2">
                <span className={`text-size-fs14 lg:text-size-fs16 xl:text-size-fs16 !font-fw500`}>{tab?.propertyTypeFeatureData?.title}</span>
                {(tab?.propertyTypeFeatureData?.slug === 'bedrooms' || tab?.propertyTypeFeatureData?.slug === 'bathroom') && (
                  <span
                    className={`!w-5.5 !h-5.5 flex items-center justify-center rounded-full text-white !text-size-fs12 xl:!text-size-fs14 lg:text-size-fs16 font-fw600 ${activeTab === index ? "bg-secondaryColor" : "bg-secondaryColor"
                      }`}
                  >
                    {tab?.data?.length}
                  </span>
                )}
              </div>
            </button>
          ))}
        </div>

        {/* Card Content */}
        <div
          className={`bg-bgColor rounded-[30px] p-4 xxl:p-6 
            ${activeTab === firstTabId ? "rounded-tl-none" : ""}
            ${activeTab === lastTabId ? "rounded-tr-none" : ""}
          `}
        >
          {(activeTabData && activeTabData?.propertyTypeFeatureData?.slug === 'bedrooms' ||
            activeTabData?.propertyTypeFeatureData?.slug === 'bathroom') && (
              activeTabData?.data?.length === 0 ?
                <ul
                  className={`!p-4 bg-white rounded-[20px] border border-[#FF7E6733] flex justify-center gap-3 lg:gap-4`}
                >
                  No {activeTabData?.propertyTypeFeatureData?.title} available
                </ul>
                :
                <div className={`${isCoLiving ? '' : 'flex flex-nowrap overflow-x-auto'} scrollbarwidth-thin gap-4 pb-1.5`}>
                  {activeTabData && activeTabData?.data?.map((item: any, index: number) => {
                    return (
                      <React.Fragment key={index}>
                        {
                          isCoLiving ?
                            <CoLivingAmenitiesCards item={item} />
                            :
                            <AmenitiesCards item={item} count={index + 1} title={activeTabData?.propertyTypeFeatureData?.title?.replace(/s$/, '')} />
                        }
                      </React.Fragment>
                    )
                  })
                  }
                </div>
            )}

          {/* Other Data */}
          {(activeTabData?.propertyTypeFeatureData?.slug !== 'bedrooms' && activeTabData?.propertyTypeFeatureData?.slug !== 'bathroom') &&
            <>
              {activeTabData &&
                activeTabData?.data?.length === 0 ?
                <ul
                  className={`!p-4 bg-white rounded-[20px] border border-[#FF7E6733] flex justify-center gap-3 lg:gap-4`}
                >
                  No {activeTabData?.propertyTypeFeatureData?.title} available
                </ul>
                :
                activeTabData?.data?.map((item: any, index: number) => {
                  return (
                    <React.Fragment key={index}>
                      {activeTabData?.propertyTypeFeatureData?.slug === 'kitchen' ?
                        <>
                          {isCoLiving && <h6 className="!mb-2 !font-fw700 fs-18">{'Private'}</h6>}
                          <ul
                            className={`!p-4 bg-white rounded-[20px] border border-[#FF7E6733] grid grid-cols-2 lg:grid-cols-3 ${item?.private?.length === 0 ? ' justify-center' : ''} flex-wrap gap-3 lg:gap-4`}
                          >
                            {item?.private?.length === 0 && <p className="flex justify-center">No Amenities available</p>}
                            {item?.private?.length > 0 && item?.private?.map((item: any, index: number) => {
                              return (
                                <li key={index} className="flex gap-2 items-center text-grey85 text-size-fs14 lg:text-size-fs16">
                                  <i className="Icon IconTick !bg-primaryColor !w-[18px] !h-[18px] lg:!w-5 lg:!h-5"></i>
                                  {item?.title}
                                </li>
                              )
                            })
                            }
                          </ul>
                          {isCoLiving && <h6 className="!mb-2 !font-fw700 fs-18">{'Shared'}</h6>}
                          <ul
                            className={`!p-4 bg-white rounded-[20px] border border-[#FF7E6733] ${isCoLiving ? 'grid grid-cols-2 lg:grid-cols-3' : 'flex'} ${item?.allAmenitiesData?.length === 0 ? ' justify-center' : ''} flex-wrap gap-3 lg:gap-4`}
                          >
                            {item?.allAmenitiesData?.length === 0 && <p className="flex justify-center">No Amenities available</p>}
                            {item?.allAmenitiesData?.length > 0 && item?.allAmenitiesData?.map((item: any, index: number) => {
                              return (
                                <li key={index} className="flex gap-2 items-center text-grey85 text-size-fs14 lg:text-size-fs16">
                                  <i className="Icon IconTick !bg-primaryColor !w-[18px] !h-[18px] lg:!w-5 lg:!h-5"></i>
                                  {item?.title}
                                </li>
                              )
                            })
                            }
                          </ul>
                        </>
                        :
                        <ul
                          className={`!p-4 bg-white rounded-[20px] border border-[#FF7E6733] grid grid-cols-2 lg:grid-cols-3 gap-3 lg:gap-4`}
                        >
                          {item?.allAmenitiesData?.length === 0 && <p className="flex justify-center">No Amenities available</p>}
                          {item?.allAmenitiesData?.length > 0 && item?.allAmenitiesData?.map((item: any, index: number) => {
                            return (
                              <li key={index} className="flex gap-2 items-center text-grey85 text-size-fs14 lg:text-size-fs16">
                                <i className="Icon IconTick !bg-primaryColor !w-[18px] !h-[18px] lg:!w-5 lg:!h-5"></i>
                                {item?.title}
                              </li>
                            )
                          })
                          }
                        </ul>
                      }
                    </React.Fragment>
                  )
                })
              }
            </>
          }
        </div>
      </div>
    </div>
  );
};

export default CommonTabs;