import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"

import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import { getCheckedRoomsCounts } from "../utils"

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

import type {
  FormValues,
  PriceContainerProps,
} from "@/types/components/hotelReservation/myStay/cancelStay"

export default function PriceContainer({
  booking,
  stayDetails,
}: PriceContainerProps) {
  const intl = useIntl()
  const { getValues } = useFormContext<FormValues>()

  const checkedRoomsDetails = getCheckedRoomsCounts(booking, getValues, intl)

  return (
    <div className={styles.priceContainer}>
      <div className={styles.info}>
        <Caption color="uiTextHighContrast" type="bold">
          {intl.formatMessage({ id: "Cancellation cost" })}
        </Caption>
        <Caption color="uiTextHighContrast">
          {stayDetails.nightsText}, {checkedRoomsDetails.adultsText}
          {checkedRoomsDetails.totalChildren > 0
            ? `, ${checkedRoomsDetails.childrenText}`
            : ""}
        </Caption>
      </div>
      <div className={styles.price}>
        <Subtitle color="burgundy" type="one">
          0 {booking.currencyCode}
        </Subtitle>
      </div>
    </div>
  )
}