"use client"

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

import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"

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

type LinkAccountForm = {
  dateOfBirth: string | null
  termsAndConditions: boolean
}
export function LinkAccountForm({
  initialDateOfBirth,
  onSubmit,
}: {
  initialDateOfBirth: string | null
  onSubmit: (dateOfBirth: string) => Promise<void>
}) {
  let [isPending, startTransition] = useTransition()
  const intl = useIntl()
  const form = useForm<LinkAccountForm>({
    defaultValues: {
      dateOfBirth: initialDateOfBirth,
      termsAndConditions: false,
    },
  })

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

      await onSubmit(data.dateOfBirth)
    })
  })

  const dateOfBirth = form.watch("dateOfBirth")
  const termsAndConditions = form.watch("termsAndConditions")
  const disableSubmit = !dateOfBirth || !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.dateSelect}>
          <Body>
            {intl.formatMessage({
              id: "Birth date",
            })}
          </Body>
          <DateSelect
            name="dateOfBirth"
            registerOptions={{
              required: {
                value: true,
                message: intl.formatMessage({ id: "Birth date is required" }),
              },
            }}
          />
        </div>
        <Caption textAlign="left">
          {intl.formatMessage({
            id: "We require this additional information in order to match your Scandic account with your EuroBonus account.",
          })}
        </Caption>
        <div className={styles.termsAndConditions}>
          <Checkbox
            name="termsAndConditions"
            registerOptions={{
              required: {
                value: true,
                message: intl.formatMessage({
                  id: "You must accept the terms and conditions",
                }),
              },
            }}
          >
            <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>
  )
}
