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

import {
  bookingTermsAndConditions,
  privacyPolicy,
} from "@/constants/currentWebHrefs"
import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"

import { CreditCard } from "@/components/Icons"
import Divider from "@/components/TempDesignSystem/Divider"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"

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

export default function ConfirmationStep() {
  const { watch } = useFormContext()
  const { selectedAncillary } = useAddAncillaryStore()
  const intl = useIntl()
  const lang = useLang()

  const quantityWithPoints = watch("quantityWithPoints")
  const quantityWithCard = watch("quantityWithCard")

  if (!selectedAncillary) {
    return null
  }

  const totalPrice = quantityWithCard
    ? selectedAncillary.price.total * quantityWithCard
    : null

  const totalPoints =
    quantityWithPoints && selectedAncillary.points
      ? selectedAncillary.points * quantityWithPoints
      : null

  return (
    <div className={styles.modalContent}>
      <header>
        <Subtitle type="two">
          {intl.formatMessage({
            id: "Reserve with Card",
          })}
        </Subtitle>
      </header>
      <Body>
        {intl.formatMessage({
          id: "Payment will be made on check-in. The card will be only used to guarantee the ancillary in case of no-show.",
        })}
      </Body>
      <div className={styles.card}>
        <CreditCard color="black" />
        <Body textTransform="bold">{"MasterCard"}</Body>
        <Body color="uiTextMediumContrast">{"**** 1234"}</Body>
      </div>
      <Checkbox name="termsAndConditions" registerOptions={{ required: true }}>
        <Caption>
          {intl.formatMessage(
            {
              id: "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
                  className={styles.link}
                  variant="underscored"
                  href={bookingTermsAndConditions[lang]}
                  target="_blank"
                >
                  {str}
                </Link>
              ),
              privacyPolicyLink: (str) => (
                <Link
                  className={styles.link}
                  variant="underscored"
                  href={privacyPolicy[lang]}
                  target="_blank"
                >
                  {str}
                </Link>
              ),
            }
          )}
        </Caption>
      </Checkbox>

      <div className={styles.price}>
        <Caption>
          {intl.formatMessage(
            { id: "<b>Total price</b> (incl VAT)" },
            { b: (str) => <b>{str}</b> }
          )}
        </Caption>
        {totalPrice !== null && (
          <Body textTransform="bold" color="uiTextHighContrast">
            {formatPrice(intl, totalPrice, selectedAncillary.price.currency)}
          </Body>
        )}
        {totalPoints !== null && (
          <div>
            <div>
              <Divider variant="vertical" color="subtle" />
            </div>
            <Body textTransform="bold" color="uiTextHighContrast">
              {intl.formatMessage(
                { id: "{value} points" },
                { value: totalPoints }
              )}
            </Body>
          </div>
        )}
      </div>
    </div>
  )
}
