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

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

import { GuaranteeInfo } from "../../Payment/GuaranteeInfo"
import { ConfirmBookingPaymentOptions } from "../PaymentOptions"

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

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

interface GuaranteeProps {
  mustBeGuaranteed: boolean
  savedCreditCards: CreditCard[] | null
  otherPaymentOptions?: PaymentMethodEnum[]
}

export function Guarantee({
  mustBeGuaranteed,
  savedCreditCards,
  otherPaymentOptions,
}: GuaranteeProps) {
  const intl = useIntl()
  const guarantee = useWatch({ name: "guarantee" })

  return (
    <div className={styles.guarantee}>
      {!mustBeGuaranteed ? (
        <>
          <div className={styles.guaranteeQuestion}>
            <Checkbox name="guarantee" topAlign className={styles.checkbox}>
              <div className={styles.textWrapper}>
                <Typography variant="Body/Supporting text (caption)/smBold">
                  <p>
                    {intl.formatMessage({
                      id: "enterDetails.guarantee.guaranteeLabel",
                      defaultMessage: "Guarantee for late arrival",
                    })}
                  </p>
                </Typography>
                <Typography variant="Body/Supporting text (caption)/smRegular">
                  <p>
                    {intl.formatMessage({
                      id: "enterDetails.guarantee.guaranteeInfo",
                      defaultMessage:
                        "I may arrive later than 18:00 and want the hotel to hold my booking.",
                    })}
                  </p>
                </Typography>
              </div>
            </Checkbox>
            <GuaranteeInfo buttonClassName={styles.guaranteeInfoButton} />
          </div>
          {guarantee ? <Divider color="Border/Divider/Default" /> : null}
        </>
      ) : null}

      {mustBeGuaranteed || guarantee ? (
        <>
          <div className={styles.paymentRequired}>
            <MaterialIcon icon="credit_card" size={24} color="CurrentColor" />
            <div className={styles.textWrapper}>
              <Typography variant="Body/Supporting text (caption)/smBold">
                <p>
                  {intl.formatMessage({
                    id: "enterDetails.guarantee.paymentCardRequiredLabel",
                    defaultMessage:
                      "Payment card required to hold your booking",
                  })}
                </p>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <p>
                  {intl.formatMessage({
                    id: "enterDetails.guarantee.paymentCardRequiredInfo",
                    defaultMessage:
                      "Complete the booking and provide your payment card details in the next step.",
                  })}
                </p>
              </Typography>
            </div>
          </div>

          {savedCreditCards && savedCreditCards.length ? (
            <>
              <Divider color="Border/Divider/Default" />
              <ConfirmBookingPaymentOptions
                savedCreditCards={savedCreditCards}
                hasMixedRates={false}
                otherPaymentOptions={otherPaymentOptions ?? []}
              />
            </>
          ) : null}
        </>
      ) : null}
    </div>
  )
}