"use client"

import { useIntl } from "react-intl"

import ButtonLink from "../ButtonLink"
import { Divider } from "../Divider"
import { MaterialIcon } from "../Icons/MaterialIcon"
import { Typography } from "../Typography"
import ParkingList from "./ParkingList"
import ParkingPrices from "./ParkingPrices"

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

import type { Parking } from "./parkingInformationTypes"

type ParkingInformationProps = {
  parking: Parking
  showExternalParkingButton?: boolean
}

export default function ParkingInformation({
  parking,
  showExternalParkingButton = true,
}: ParkingInformationProps) {
  const intl = useIntl()
  const title = `${parking.type}${parking.name ? ` (${parking.name})` : ""}`

  return (
    <div className={styles.parkingInformation}>
      <div className={styles.list}>
        <Typography variant="Title/Subtitle/md">
          <h4 className={styles.heading}>{title}</h4>
        </Typography>
        <ParkingList
          numberOfChargingSpaces={parking.numberOfChargingSpaces}
          canMakeReservation={parking.canMakeReservation}
          numberOfParkingSpots={parking.numberOfParkingSpots}
          distanceToHotel={parking.distanceToHotel}
          address={parking.address}
        />
      </div>
      <div className={styles.prices}>
        <Typography variant="Body/Paragraph/mdBold">
          <h5 className={styles.heading}>
            {intl.formatMessage({
              id: "parkingInformation.prices",
              defaultMessage: "Prices",
            })}
          </h5>
        </Typography>
        <div className={styles.priceWrapper}>
          <Typography variant="Title/Overline/sm">
            <h6 className={styles.priceHeading}>
              {intl.formatMessage({
                id: "parkingInformation.weekdayPrices",
                defaultMessage: "Weekday prices",
              })}
            </h6>
          </Typography>
          <Divider />
          {parking.pricing.localCurrency ? (
            <ParkingPrices
              currency={parking.pricing.localCurrency.currency}
              freeParking={parking.pricing.freeParking}
              pricing={parking.pricing.localCurrency.ordinary}
            />
          ) : null}
        </div>
        <div className={styles.priceWrapper}>
          <Typography variant="Title/Overline/sm">
            <h6 className={styles.priceHeading}>
              {intl.formatMessage({
                id: "parkingInformation.weekendPrices",
                defaultMessage: "Weekend prices",
              })}
            </h6>
          </Typography>
          <Divider />
          {parking.pricing.localCurrency ? (
            <ParkingPrices
              currency={parking.pricing.localCurrency.currency}
              freeParking={parking.pricing.freeParking}
              pricing={parking.pricing.localCurrency.weekend}
            />
          ) : null}
        </div>
      </div>
      {parking.externalParkingUrl && showExternalParkingButton && (
        <ButtonLink size="md" href={parking.externalParkingUrl} target="_blank">
          {intl.formatMessage({
            id: "parkingInformation.bookParking",
            defaultMessage: "Book parking",
          })}
          <MaterialIcon icon="open_in_new" color="CurrentColor" />
        </ButtonLink>
      )}
    </div>
  )
}