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

import HotelCard from "@/components/HotelReservation/HotelCard"
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 Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"

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

import { LangParams, PageArgs } from "@/types/params"

export default async function SelectHotelPage({
  params,
}: PageArgs<LangParams>) {
  const intl = await getIntl()
  setLang(params.lang)

  const tempSearchTerm = "Stockholm"
  const getHotelFitlers = await serverClient().hotel.filters.get({
    language: params.lang,
    country: "Sweden",
    city: "Halmstad",
  })

  if (!getHotelFitlers) return null

  console.log(getHotelFitlers.data)

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

  if (!getAvailableHotels) return null

  const { availability } = getAvailableHotels

  console.log(availability)

  return (
    <main className={styles.main}>
      <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={hotelFilters} /> */}
      </section>
      <section className={styles.hotelCards}>
        {availability.length ? (
          availability.map((hotel) => (
            <HotelCard
              key={hotel.hotelId}
              checkInDate={hotel.checkInDate}
              checkOutDate={hotel.checkOutDate}
              hotelId={hotel.hotelId}
              price={hotel.bestPricePerNight}
            />
          ))
        ) : (
          // TODO: handle no hotels found
          <Title>No hotels found</Title>
        )}
      </section>
    </main>
  )
}