import { env } from "@/env/server"

import {
  fetchAvailableHotels,
  getFiltersFromHotels,
} from "@/app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils"
import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
import { setLang } from "@/i18n/serverContext"

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

import {
  PointOfInterest,
  PointOfInterestCategoryNameEnum,
  PointOfInterestGroupEnum,
} from "@/types/hotel"
import { LangParams, PageArgs } from "@/types/params"

export default async function SelectHotelMapPage({
  params,
}: PageArgs<LangParams, {}>) {
  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
  setLang(params.lang)

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

  const filters = getFiltersFromHotels(hotels)

  // TODO: this is just a quick transformation to get something there. May need rework
  const pointOfInterests: PointOfInterest[] = hotels.map((hotel) => ({
    coordinates: {
      lat: hotel.hotelData.location.latitude,
      lng: hotel.hotelData.location.longitude,
    },
    name: hotel.hotelData.name,
    distance: hotel.hotelData.location.distanceToCentre,
    categoryName: PointOfInterestCategoryNameEnum.HOTEL,
    group: PointOfInterestGroupEnum.LOCATION,
  }))

  return (
    <main className={styles.main}>
      <SelectHotelMap
        apiKey={googleMapsApiKey}
        // TODO: use correct coordinates. The city center?
        coordinates={{ lat: 59.32, lng: 18.01 }}
        pointsOfInterest={pointOfInterests}
        mapId={googleMapId}
      />
    </main>
  )
}