"use client"
import { useSearchParams } from "next/navigation"
import { useMemo } from "react"

import Title from "@/components/TempDesignSystem/Text/Title"

import HotelCard from "../HotelCard"

import styles from "./hotelCardListing.module.css"

import {
  type HotelCardListingProps,
  HotelCardListingTypeEnum,
} from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"

export default function HotelCardListing({
  hotelData,
  type = HotelCardListingTypeEnum.PageListing,
  state = "default",
}: HotelCardListingProps) {
  const searchParams = useSearchParams()

  const hotels = useMemo(() => {
    const appliedFilters = searchParams.get("filters")?.split(",")
    if (!appliedFilters || appliedFilters.length === 0) return hotelData

    return hotelData.filter((hotel) =>
      appliedFilters.every((appliedFilterId) =>
        hotel.hotelData.detailedFacilities.some(
          (facility) => facility.id.toString() === appliedFilterId
        )
      )
    )
  }, [searchParams, hotelData])

  return (
    <section className={styles.hotelCards}>
      {hotels?.length ? (
        hotels.map((hotel) => (
          <HotelCard
            key={hotel.hotelData.name}
            hotel={hotel}
            type={type}
            state={state}
          />
        ))
      ) : (
        <Title>No hotels found</Title>
      )}
    </section>
  )
}