"use client"

import { useParams, useRouter } from "next/navigation"
import { useTransition } from "react"
import { FormProvider, useForm } 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 { profileEdit } from "@/constants/routes/myPages"
import { sasPartnershipTermsAndConditions } from "@/constants/webHrefs"

import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"

import styles from "./link-sas.module.css"

import type { LangParams } from "@/types/params"

type LinkAccountForm = {
  termsAndConditions: boolean
}
export function LinkAccountForm({
  userDateOfBirth,
}: {
  userDateOfBirth: string | null
}) {
  const router = useRouter()
  const params = useParams<LangParams>()
  let [isPending, startTransition] = useTransition()
  const intl = useIntl()
  const form = useForm<LinkAccountForm>({
    defaultValues: {
      termsAndConditions: false,
    },
  })

  const handleSubmit = form.handleSubmit((data) => {
    startTransition(async () => {
      if (!data.termsAndConditions) return

      const url = `/${params.lang}/sas-x-scandic/login?intent=link`
      router.push(url)
    })
  })

  const termsAndConditions = form.watch("termsAndConditions")
  const disableSubmit = !userDateOfBirth || !termsAndConditions

  return (
    <FormProvider {...form}>
      <form onSubmit={handleSubmit} className={styles.form}>
        <div className={styles.titles}>
          <Image
            alt={"Scandic ❤️ SAS"}
            height={25}
            width={182}
            src="/_static/img/partner/sas/sas-campaign-logo.png"
          />
          <Typography variant="Title/Subtitle/lg">
            <h3>
              {intl.formatMessage({
                defaultMessage: "Link your accounts",
              })}
            </h3>
          </Typography>
        </div>
        <div className={styles.dateOfBirth}>
          <Typography variant="Body/Paragraph/mdBold">
            <p>
              {userDateOfBirth
                ? intl.formatMessage(
                    {
                      defaultMessage:
                        "Birth date: {dateOfBirth, date, ::MMMM d yyyy}",
                    },
                    {
                      dateOfBirth: new Date(userDateOfBirth),
                    }
                  )
                : intl.formatMessage({
                    defaultMessage: "Birth date is missing",
                  })}
            </p>
          </Typography>
          <Typography variant="Label/xsRegular">
            <p className={styles.dateOfBirthDescription}>
              {intl.formatMessage({
                defaultMessage:
                  "We require your birth date in order to link your Scandic Friends account with your SAS EuroBonus account. Please check that it is correct.",
              })}
            </p>
          </Typography>
          <Link
            href={profileEdit[params.lang]}
            className={styles.dateOfBirthLink}
            color="Text/Interactive/Secondary"
            textDecoration="underline"
          >
            {intl.formatMessage({
              defaultMessage: "Edit your personal details",
            })}

            <MaterialIcon icon="arrow_forward" size={18} color="CurrentColor" />
          </Link>
        </div>
        <div className={styles.termsAndConditions}>
          <Checkbox
            name="termsAndConditions"
            registerOptions={{
              required: {
                value: true,
                message: intl.formatMessage({
                  defaultMessage: "You must accept the terms and conditions",
                }),
              },
              disabled: !userDateOfBirth,
            }}
          >
            <Typography variant="Body/Paragraph/mdRegular">
              <p>
                {intl.formatMessage({
                  defaultMessage: "I accept the terms and conditions",
                })}
              </p>
            </Typography>
          </Checkbox>
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.termsDescription}>
              {intl.formatMessage(
                {
                  defaultMessage:
                    "By linking your accounts you accept the <sasScandicTermsAndConditionsLink>Terms & Conditions for Scandic Friends and SAS EuroBonus Account Linking</sasScandicTermsAndConditionsLink>.",
                },
                {
                  sasScandicTermsAndConditionsLink: (str) => (
                    <Link
                      href={sasPartnershipTermsAndConditions[params.lang]}
                      weight="bold"
                      textDecoration="underline"
                    >
                      {str}
                    </Link>
                  ),
                }
              )}
            </p>
          </Typography>
        </div>
        <div className={styles.ctaContainer}>
          <Button
            theme="base"
            fullWidth
            className={styles.ctaButton}
            type="submit"
            disabled={isPending || disableSubmit}
          >
            {intl.formatMessage({
              defaultMessage: "Link my accounts",
            })}
          </Button>
        </div>
      </form>
    </FormProvider>
  )
}
