"use client"

import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

import { formatPrice } from "@/utils/numberFormatting"

import { getPeriod } from "./utils"

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

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

export default function ParkingPrices({
  currency = "",
  freeParking,
  pricing,
}: ParkingPricesProps) {
  const intl = useIntl()

  if (freeParking) {
    return (
      <Typography variant="Body/Paragraph/mdBold">
        <p className={styles.wrapper}>
          {intl.formatMessage({ defaultMessage: "Free parking" })}
        </p>
      </Typography>
    )
  }

  const filteredPricing = pricing.filter((price) => price.amount > 0)

  if (filteredPricing.length === 0) {
    return (
      <dl className={styles.wrapper}>
        <div className={styles.period}>
          <div className={styles.information}>
            <Typography variant="Body/Paragraph/mdBold">
              <dt>{getPeriod(intl, "Hour")}</dt>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <dd>
                {intl.formatMessage({
                  defaultMessage: "At a cost",
                })}
              </dd>
            </Typography>
          </div>
        </div>
      </dl>
    )
  }

  return (
    <dl className={styles.wrapper}>
      {filteredPricing.map(({ period, amount, startTime, endTime }) => (
        <div key={period} className={styles.period}>
          <div className={styles.information}>
            <Typography variant="Body/Paragraph/mdBold">
              <dt>{getPeriod(intl, period)}</dt>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <dd>{formatPrice(intl, amount, currency)}</dd>
            </Typography>
          </div>
          {startTime && endTime && period !== Periods.allDay ? (
            <Typography variant="Body/Paragraph/mdRegular">
              <div className={styles.information}>
                <dt>{intl.formatMessage({ defaultMessage: "From" })}</dt>
                {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                <dd>{`${startTime}-${endTime}`}</dd>
              </div>
            </Typography>
          ) : null}
        </div>
      ))}
    </dl>
  )
}