import { serverClient } from "@/lib/trpc/server"

import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
import { ChevronRightIcon } from "@/components/Icons"
import StaticMap from "@/components/Maps/StaticMap"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { getLang, setLang } from "@/i18n/serverContext"

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

import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import { LangParams, PageArgs } from "@/types/params"

async function getAvailableHotels(
  input: AvailabilityInput
): Promise<HotelData[]> {
  console.log("This is the input: ", input)
  const getAvailableHotels = await serverClient().hotel.availability.get(input)

  if (!getAvailableHotels) throw new Error()

  const { availability } = getAvailableHotels

  const hotels = availability.map(async (hotel) => {
    const hotelData = await serverClient().hotel.hotelData.get({
      hotelId: hotel.hotelId.toString(),
      language: getLang(),
    })

    if (!hotelData) throw new Error()

    return {
      hotelData: hotelData.data.attributes,
      price: hotel.bestPricePerNight,
    }
  })

  return await Promise.all(hotels)
}

export default async function SelectHotelPage({
  params,
}: PageArgs<LangParams>) {
  setLang(params.lang)

  const tempSearchTerm = "Stockholm"
  const intl = await getIntl()

  const hotels = await getAvailableHotels({
    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
    roomStayStartDate: "2024-11-02",
    roomStayEndDate: "2024-11-03",
    adults: 1,
  })

  const filters = hotels.flatMap((data) => data.hotelData.detailedFacilities)

  const filterIds = [...new Set(filters.map((data) => data.id))]
  const filterList: {
    name: string
    id: number
    applyToAllHotels: boolean
    public: boolean
    icon: string
    sortOrder: number
    code?: string
    iconName?: string
  }[] = filterIds
    .map((id) => filters.find((find) => find.id === id))
    .filter(
      (
        filter
      ): filter is {
        name: string
        id: number
        applyToAllHotels: boolean
        public: boolean
        icon: string
        sortOrder: number
        code?: string
        iconName?: string
      } => filter !== undefined
    )

  return (
    <main className={styles.main}>
      <section className={styles.section}>
        <StaticMap
          city={tempSearchTerm}
          width={340}
          height={180}
          zoomLevel={11}
          mapType="roadmap"
          altText={`Map of ${tempSearchTerm} city center`}
        />
        <Link className={styles.link} color="burgundy" href="#">
          {intl.formatMessage({ id: "Show map" })}
          <ChevronRightIcon color="burgundy" />
        </Link>
        <HotelFilter filters={filterList} />
      </section>
      <HotelCardListing hotelData={hotels} />
    </main>
  )
}