"use client"
import { useIntl } from "react-intl"

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

import TermsAndConditions from "../Payment/TermsAndConditions"
import { Guarantee } from "./Guarantee"
import { ConfirmBookingPaymentOptions } from "./PaymentOptions"
import SmsConfirmation from "./SmsConfirmation"

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

import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
import type { CreditCard } from "@scandic-hotels/trpc/types/user"

interface ConfirmBookingProps {
  savedCreditCards: CreditCard[] | null
  otherPaymentOptions: PaymentMethodEnum[]
  hasOnlyFlexRates: boolean
  hasMixedRates: boolean
  isRedemptionBooking: boolean
  bookingMustBeGuaranteed: boolean
}

export default function ConfirmBooking({
  savedCreditCards,
  otherPaymentOptions,
  hasOnlyFlexRates,
  hasMixedRates,
  isRedemptionBooking,
  bookingMustBeGuaranteed,
}: ConfirmBookingProps) {
  const intl = useIntl()

  if (isRedemptionBooking) {
    return (
      <div className={styles.confirmBooking}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              id: "enterDetails.confirmBooking.redemptionGuaranteeInfo",
              defaultMessage:
                "When you confirm the booking the room will be guaranteed for late arrival. If you fail to arrive without cancelling in advance or if you cancel after 18:00 local time, you will be charged for one reward night.",
            })}
          </p>
        </Typography>
        <TermsAndConditions isFlexBookingTerms />
        <SmsConfirmation />
      </div>
    )
  }

  if (hasOnlyFlexRates) {
    return (
      <div className={styles.confirmBooking}>
        <Guarantee
          mustBeGuaranteed={bookingMustBeGuaranteed}
          savedCreditCards={savedCreditCards}
        />
        <Divider color="Border/Divider/Subtle" />
        <TermsAndConditions isFlexBookingTerms />
        <SmsConfirmation />
      </div>
    )
  }

  return (
    <div className={styles.confirmBooking}>
      {hasMixedRates ? (
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              id: "enterDetails.payment.mixedRatesInfo",
              defaultMessage:
                "As your booking includes rooms with different terms, we will be charging part of the booking now and the remainder will be collected by the reception at check-in.",
            })}
          </p>
        </Typography>
      ) : null}

      <ConfirmBookingPaymentOptions
        savedCreditCards={savedCreditCards}
        hasMixedRates={hasMixedRates}
        otherPaymentOptions={otherPaymentOptions}
      />

      <TermsAndConditions isFlexBookingTerms={hasOnlyFlexRates} />
      <SmsConfirmation />
    </div>
  )
}