"use client"

import Image from "next/image"
import { useParams, useRouter } from "next/navigation"
import { type ReactNode, useTransition } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"

import { profileEdit } from "@/constants/routes/myPages"

import { ArrowRightIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Label from "@/components/TempDesignSystem/Form/Label"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"

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"
          />
          <Title level="h3" textTransform="regular">
            {intl.formatMessage({ id: "Link your accounts" })}
          </Title>
        </div>
        <div className={styles.dateOfBirth}>
          <Body textTransform="bold">
            {userDateOfBirth
              ? intl.formatMessage(
                  {
                    id: "Birth date: {dateOfBirth, date, ::MMMM d yyyy}",
                  },
                  {
                    dateOfBirth: new Date(userDateOfBirth),
                  }
                )
              : intl.formatMessage({ id: "Birth date is missing" })}
          </Body>
          <Label size="small" className={styles.dateOfBirthDescription}>
            {intl.formatMessage({
              id: "We require your birth date in order to link your Scandic account with your SAS EuroBonus account. Please check that it is correct.",
            })}
          </Label>
          <Link
            href={profileEdit[params.lang]}
            className={styles.dateOfBirthLink}
            color="peach80"
            variant="underscored"
          >
            {intl.formatMessage({
              id: "Edit your personal details",
            })}
            <ArrowRightIcon color="peach80" height={18} width={18} />
          </Link>
        </div>
        <div className={styles.termsAndConditions}>
          <Checkbox
            name="termsAndConditions"
            registerOptions={{
              required: {
                value: true,
                message: intl.formatMessage({
                  id: "You must accept the terms and conditions",
                }),
              },
              disabled: !userDateOfBirth,
            }}
          >
            <Body>
              {intl.formatMessage({ id: "I accept the terms and conditions" })}
            </Body>
          </Checkbox>
          <Body className={styles.termsDescription}>
            {intl.formatMessage<ReactNode>(
              {
                id: "By linking your accounts you accept the <sasScandicTermsAndConditionsLink>Scandic Friends & SAS Terms and Conditions</sasScandicTermsAndConditionsLink>. You will be connected throughout the duration of your employment or until further notice, and you can opt out at any time.",
              },
              {
                sasScandicTermsAndConditionsLink: (str) => (
                  <Link
                    // TODO correct link
                    href={"#"}
                    weight="bold"
                    variant="default"
                    textDecoration="underline"
                  >
                    {str}
                  </Link>
                ),
              }
            )}
          </Body>
        </div>
        <div className={styles.ctaContainer}>
          <Button
            theme="base"
            fullWidth
            className={styles.ctaButton}
            type="submit"
            disabled={isPending || disableSubmit}
          >
            {intl.formatMessage({ id: "Link my accounts" })}
          </Button>
        </div>
      </form>
    </FormProvider>
  )
}
