'use client'
import { AppDispatch } from "@/redux/slices";
import { propertyActions } from "@/redux/slices/Property/property";
import { PropertyDetailContent } from "@/src/types/StaticContent/propertydetail.content.type";
import { PropertyResponse } from "@/src/types/api/property.type";
import { convertTo12HourAMPM } from "@/src/utils/commonFunctions";
import useWorkspaceAndHomebase from "@/src/utils/customHooks/useWorkspaceAndHomebase";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import CoLivingBedrooms from "../CoLivingBedrooms/CoLivingBedrooms";
import HomeBaseSection from "../HomeBaseSection";
import PropertyMapSection from "../PropertyMapSection";
import WorkBaseSection from "../WorkBaseSection";

const AmenitiesMain = ({
  PropertyDetails,
  PropertyDetailContent,
  setSelectedBedroom,
  selectedBedroom
}: {
  PropertyDetails: PropertyResponse,
  PropertyDetailContent: PropertyDetailContent,
  setSelectedBedroom: any,
  selectedBedroom: any
}) => {

  const dispatch = useDispatch<AppDispatch>();
  const { workspaceData, homebaseData } = useWorkspaceAndHomebase(PropertyDetails?.data?.propertyFeatureMappingData);

  // Json data for Work base section

  const workBaseData = {
    title: PropertyDetailContent?.WORKSPACE,
    popupDescription: 'You can view all workspace here.',
    deluxeInfo: {
      label: PropertyDetails?.data?.workspaceType === 'deluxe' ? PropertyDetailContent?.DELUXE : '',
      description: PropertyDetailContent?.DELUXE_INFO,
    },
    data: workspaceData,
    type: 'workspace',
    locationLabel: PropertyDetailContent?.IN_THE_COMMON_AREA,
    items: PropertyDetails?.data?.workspaceData || [],
  };

  // Json data for home base section
  const homeBaseData = {
    title: PropertyDetailContent?.HOMEBASE,
    popupDescription: PropertyDetailContent?.HOMEBASE_POPUP_DESCRIPTION,
    description: PropertyDetails?.data?.description || "",
    items: [],
    data: homebaseData,
  };

  // Json data for where you'll be section
  const whereYouWillBeData = {
    title: PropertyDetailContent?.WHERE_YOU_WILL_BE,
    popupDescription: PropertyDetailContent?.WHERE_YOU_WILL_BE_POPUP_DESCRIPTION,
    items: PropertyDetails?.data?.allLocationAmenities || [],
  };

  // Json data for good to know section
  const goodToKnowData = {
    title: PropertyDetailContent?.GOOD_TO_KNOW,
    deluxeInfo: {
      label: "",
      description:
        "",
    },
    locationLabel: PropertyDetailContent?.IN_THE_COMMON_AREA,
    items: [

      { icon: "IconClock", label: `${PropertyDetailContent?.CHECK_IN_TIME} ${PropertyDetails?.data?.anytimeCheckIn ? PropertyDetailContent?.ANYTIME : `${convertTo12HourAMPM(PropertyDetails?.data?.checkIn)} - ${convertTo12HourAMPM(PropertyDetails?.data?.checkInTo)}`}` },
      { icon: "IconClock", label: `${PropertyDetailContent?.CHECK_OUT_TIME} ${PropertyDetails?.data?.anytimeCheckOut ? PropertyDetailContent?.ANYTIME : `${convertTo12HourAMPM(PropertyDetails?.data?.checkOut)} - ${convertTo12HourAMPM(PropertyDetails?.data?.checkOutTo)}`}` },
      { icon: PropertyDetails?.data?.children ? 'IconKidsAllow' : "IconKidsNotAllow", label: PropertyDetails?.data?.children ? `${PropertyDetailContent?.KIDS_ARE_WELCOME}` : `${PropertyDetailContent?.KIDS_ARE_NOT_WELCOME}` },
      { icon: PropertyDetails?.data?.pet ? 'IconPetsAllow' : "IconPets", label: PropertyDetails?.data?.pet ? `${PropertyDetailContent?.PET_ALLOWED}` : `${PropertyDetailContent?.NO_PET_ALLOWED}` },
      { icon: PropertyDetails?.data?.smoking ? 'IconSmoke' : "IconNoSmoke", label: PropertyDetails?.data?.smoking ? `${PropertyDetailContent?.SMOKING_ALLOWED}` : `${PropertyDetailContent?.SMOKING_PROHIBITED}` },
    ],
  };

  useEffect(() => {
    dispatch(propertyActions.successCurrentPage(1));
  }, [])

  return (
    <>
      <HomeBaseSection data={workBaseData} type={2} bgColor={'bg-whiteFBColor'} isCoLiving={PropertyDetails?.data?.propertyTypeData?.slug === 'coliving'} />
      <HomeBaseSection data={homeBaseData} bgColor={'bg-white'} AmenitiesShow={true} isCoLiving={PropertyDetails?.data?.propertyTypeData?.slug === 'coliving'} />
      <CoLivingBedrooms
        propertyData={PropertyDetails?.data}
        PropertyDetailContent={PropertyDetailContent}
        setSelectedBedroom={setSelectedBedroom}
        selectedBedroom={selectedBedroom}
      />
      <HomeBaseSection data={whereYouWillBeData} type={1} bgColor={'bg-whiteFBColor'} isCoLiving={PropertyDetails?.data?.propertyTypeData?.slug === 'coliving'} />
      <PropertyMapSection data={PropertyDetails?.data} />
      <WorkBaseSection data={goodToKnowData} type={2} />
    </>
  )
}

export default AmenitiesMain