import { differenceInCalendarDays, format,isWeekend } from "date-fns"

import { Lang } from "@/constants/languages"
import { selectHotelMap } from "@/constants/routes/hotelReservation"

import {
  fetchAvailableHotels,
  getFiltersFromHotels,
} from "@/app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils"
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 TrackingSDK from "@/components/TrackingSDK"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"

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

import {
  TrackingChannelEnum,
  TrackingSDKHotelInfo,
  TrackingSDKPageData,
} from "@/types/components/tracking"
import { LangParams, PageArgs } from "@/types/params"

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

  const tempSearchTerm = "Stockholm"
  const tempArrivalDate = new Date("2024-10-25")
  const tempDepartureDate = new Date("2024-10-26")
  const intl = await getIntl()

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

  const filterList = getFiltersFromHotels(hotels)

  const pageTrackingData: TrackingSDKPageData = {
    pageId: "select-hotel",
    domainLanguage: params.lang as Lang,
    channel: TrackingChannelEnum["hotelreservation"],
    pageName: "hotelreservation|select-hotel",
    siteSections: "hotelreservation|select-hotel",
    pageType: "bookinghotelspage",
  }

  const hotelsTrackingData: TrackingSDKHotelInfo = {
    availableResults: hotels.length,
    searchTerm: tempSearchTerm,
    arrivalDate: format(tempArrivalDate, "yyyy-MM-dd"),
    departureDate: format(tempDepartureDate, "yyyy-MM-dd"),
    noOfAdults: 1, // TODO: Use values from searchParams
    noOfChildren: 0, // TODO: Use values from searchParams
    noOfRooms: 1, // TODO: Use values from searchParams
    duration: differenceInCalendarDays(tempDepartureDate, tempArrivalDate),
    leadTime: differenceInCalendarDays(tempArrivalDate, new Date()),
    searchType: "destination",
    bookingTypeofDay: isWeekend(tempArrivalDate) ? "weekend" : "weekday",
    country: hotels[0].hotelData.address.country,
    region: hotels[0].hotelData.address.city,
  }

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