import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import { formatPrice } from "@/utils/numberFormatting"

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

import {
  type ParkingPricesProps,
  Periods,
} from "@/types/components/hotelPage/sidepeek/parking"

export default async function ParkingPrices({
  currency = "",
  freeParking,
  pricing,
}: ParkingPricesProps) {
  const intl = await getIntl()
  const day = intl.formatMessage({ id: "Price per day" })
  const night = intl.formatMessage({ id: "Price per night" })
  const allDay = intl.formatMessage({ id: "Price per 24 hours" })

  function getPeriod(period?: string) {
    switch (period) {
      case Periods.day:
        return day
      case Periods.night:
        return night
      case Periods.allDay:
        return allDay
      default:
        return period
    }
  }

  const filteredPeriods = pricing?.filter((filter) => filter.period !== "Hour")

  return (
    <div className={styles.wrapper}>
      {filteredPeriods?.map((parking) => (
        <div key={parking.period} className={styles.period}>
          <div className={styles.information}>
            <Body textTransform="bold" color="uiTextHighContrast">
              {getPeriod(parking.period)}
            </Body>
            <Body color="uiTextHighContrast">
              {parking.amount
                ? freeParking
                  ? intl.formatMessage({ id: "Free parking" })
                  : formatPrice(intl, parking.amount, currency)
                : intl.formatMessage({ id: "N/A" })}
            </Body>
          </div>
          {parking.startTime &&
            parking.endTime &&
            parking.period !== Periods.allDay && (
              <div className={styles.information}>
                <Body color="uiTextHighContrast">
                  {intl.formatMessage({ id: "From" })}
                </Body>
                <Body color="uiTextHighContrast">
                  {`${parking.startTime}-${parking.endTime}`}
                </Body>
              </div>
            )}
        </div>
      ))}
    </div>
  )
}
