import { serverClient } from "@/lib/trpc/server"
import { notFound } from "@/server/errors/next"

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({
  cityId,
  roomStayStartDate,
  roomStayEndDate,
  adults,
}: AvailabilityInput): Promise<HotelData[] | null> {
  const getAvailableHotels = await serverClient().hotel.availability.get({
    cityId: cityId,
    roomStayStartDate: roomStayStartDate,
    roomStayEndDate: roomStayEndDate,
    adults: adults,
  })

  if (!getAvailableHotels) return null

  const { availability } = getAvailableHotels

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

    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,
  })

  if (!hotels) return null

  if (hotels.some((item) => item?.hotelData === undefined)) return notFound()

  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 />
      </section>
      <HotelCardListing hotelData={hotels} />
    </main>
  )
}