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

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

import { PaymentMethodEnum } from "@/constants/booking"
import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"
import { dt } from "@/lib/dt"
import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"

import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Payment/PaymentOptionsGroup"
import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import Alert from "@/components/TempDesignSystem/Alert"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"

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

import type { ConfirmationStepProps } from "@/types/components/myPages/myStay/ancillaries"
import { AlertTypeEnum } from "@/types/enums/alert"

export default function ConfirmationStep({
  savedCreditCards,
  user,
}: ConfirmationStepProps) {
  const intl = useIntl()
  const lang = useLang()
  const { checkInDate, guaranteeInfo, selectedAncillary } =
    useAddAncillaryStore((state) => ({
      checkInDate: state.booking.checkInDate,
      guaranteeInfo: state.booking.guaranteeInfo,
      selectedAncillary: state.selectedAncillary,
    }))
  const refundableDate = dt(checkInDate)
    .subtract(1, "day")
    .locale(lang)
    .format("23:59, dddd, D MMMM YYYY")

  const quantityWithCard = useWatch({ name: "quantityWithCard" })
  const quantityWithPoints = useWatch({ name: "quantityWithPoints" })
  const currentPoints = user?.membership?.currentPoints ?? 0
  const totalPoints =
    quantityWithPoints && selectedAncillary?.points
      ? selectedAncillary.points * quantityWithPoints
      : null
  return (
    <div className={styles.modalContent}>
      <Typography variant="Body/Paragraph/mdRegular">
        <p>
          {intl.formatMessage(
            {
              defaultMessage:
                "All ancillaries are fully refundable until {date}. Time selection and special requests are also modifiable.",
            },
            { date: refundableDate }
          )}
        </p>
      </Typography>
      {!!quantityWithPoints && (
        <>
          <Typography variant="Title/Subtitle/md">
            <h2>
              {intl.formatMessage({
                defaultMessage: "Points to be deducted now",
              })}
            </h2>
          </Typography>
          <div className={styles.totalPointsContainer}>
            <div className={styles.totalPoints}>
              <MaterialIcon icon="diamond" />
              <Typography variant="Title/Overline/sm">
                <h2>
                  {intl.formatMessage(
                    {
                      defaultMessage: "{amount} points",
                    },
                    { amount: totalPoints }
                  )}
                </h2>
              </Typography>
            </div>
            <Typography variant="Body/Paragraph/mdRegular">
              <p>
                {intl.formatMessage(
                  {
                    defaultMessage: "{amount} points available",
                  },
                  { amount: currentPoints }
                )}
              </p>
            </Typography>
          </div>
        </>
      )}
      {!!quantityWithCard && (
        <>
          <header>
            <Typography variant="Title/Subtitle/md">
              <h2>
                {intl.formatMessage({
                  defaultMessage: "Reserve with Card",
                })}
              </h2>
            </Typography>
          </header>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p>
              {intl.formatMessage({
                defaultMessage:
                  "Payment will be made on check-in. The card will be only used to guarantee the ancillary in case of no-show.",
              })}
            </p>
          </Typography>
          {guaranteeInfo ? (
            <PaymentOptionsGroup name="paymentMethod">
              <PaymentOption
                value={PaymentMethodEnum.card}
                cardNumber={guaranteeInfo.maskedCard.slice(-4)}
                label={intl.formatMessage({
                  defaultMessage: "Credit card",
                })}
              />
            </PaymentOptionsGroup>
          ) : (
            <>
              <Alert
                type={AlertTypeEnum.Info}
                text={intl.formatMessage({
                  defaultMessage:
                    "By adding a card you also guarantee your room booking for late arrival.",
                })}
              />
              {savedCreditCards?.length ? (
                <MySavedCards savedCreditCards={savedCreditCards} />
              ) : null}
              <PaymentOptionsGroup
                name="paymentMethod"
                label={
                  savedCreditCards?.length
                    ? intl.formatMessage({
                        defaultMessage: "OTHER",
                      })
                    : undefined
                }
              >
                <PaymentOption
                  value={PaymentMethodEnum.card}
                  label={intl.formatMessage({
                    defaultMessage: "Credit card",
                  })}
                />
              </PaymentOptionsGroup>
            </>
          )}
        </>
      )}

      <div className={styles.termsAndConditions}>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>
            {intl.formatMessage(
              {
                defaultMessage:
                  "Yes, I accept the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. There you can learn more about what data we process, your rights and where to turn if you have questions.",
              },
              {
                termsAndConditionsLink: (str) => (
                  <Link
                    textDecoration="underline"
                    color="Text/Interactive/Secondary"
                    target="_blank"
                    href={bookingTermsAndConditions[lang]}
                  >
                    {str}
                  </Link>
                ),
                privacyPolicyLink: (str) => (
                  <Link
                    textDecoration="underline"
                    color="Text/Interactive/Secondary"
                    target="_blank"
                    href={privacyPolicy[lang]}
                  >
                    {str}
                  </Link>
                ),
              }
            )}
          </p>
        </Typography>
        <Checkbox
          name="termsAndConditions"
          registerOptions={{ required: true }}
        >
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <span>
              {intl.formatMessage({
                defaultMessage: "I accept the terms and conditions",
              })}
            </span>
          </Typography>
        </Checkbox>
      </div>
    </div>
  )
}
