"use client"

import { useIntl } from "react-intl"

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

import ButtonLink from "@/components/ButtonLink"

import ParkingList from "./ParkingList"
import ParkingPrices from "./ParkingPrices"

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

import type { Parking } from "@scandic-hotels/trpc/types/hotel"

interface 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({ defaultMessage: "Prices" })}
          </h5>
        </Typography>
        <div className={styles.priceWrapper}>
          <Typography variant="Title/Overline/sm">
            <h6 className={styles.priceHeading}>
              {intl.formatMessage({ 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({ 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
          typography="Body/Paragraph/mdBold"
          href={parking.externalParkingUrl}
          target="_blank"
        >
          {intl.formatMessage({ defaultMessage: "Book parking" })}
          <MaterialIcon icon="open_in_new" color="CurrentColor" />
        </ButtonLink>
      )}
    </div>
  )
}