"use client"

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

import { privacyPolicy } from "@/constants/currentWebHrefs"

import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"

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

export default function Signup({ name }: { name: string }) {
  const lang = useLang()
  const intl = useIntl()

  const [isJoinChecked, setIsJoinChecked] = useState(false)

  const joinValue = useWatch({ name })

  useEffect(() => {
    // In order to avoid hydration errors the state needs to be set as side effect,
    // since the join value can come from search params
    setIsJoinChecked(joinValue)
  }, [joinValue])

  const list = [
    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
    { title: intl.formatMessage({ id: "Join at no cost" }) },
  ]

  return (
    <div className={styles.container}>
      <CheckboxCard
        highlightSubtitle
        list={list}
        name={name}
        subtitle={intl.formatMessage(
          {
            id: "{difference}{amount} {currency}",
          },
          {
            amount: "491",
            currency: "SEK",
            difference: "-",
          }
        )}
        title={intl.formatMessage({ id: "Join Scandic Friends" })}
      />
      {isJoinChecked ? (
        <div className={styles.additionalFormData}>
          <div className={styles.dateField}>
            <header>
              <Caption type="bold">
                {intl.formatMessage({ id: "Birth date" })} *
              </Caption>
            </header>
            <DateSelect
              name="dateOfBirth"
              registerOptions={{ required: true }}
            />
            <Input
              name="zipCode"
              label={intl.formatMessage({ id: "Zip code" })}
              registerOptions={{ required: true }}
            />
          </div>
          <div>
            <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
              <Body>
                {intl.formatMessage({
                  id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
                })}{" "}
                <Link
                  variant="underscored"
                  color="peach80"
                  target="_blank"
                  href={privacyPolicy[lang]}
                >
                  {intl.formatMessage({ id: "Scandic's Privacy Policy." })}
                </Link>
              </Body>
            </Checkbox>
          </div>
        </div>
      ) : null}
    </div>
  )
}
