"use client"

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

import DateSelect from "@/components/TempDesignSystem/Form/Date"
import Input from "@/components/TempDesignSystem/Form/Input"
import Caption from "@/components/TempDesignSystem/Text/Caption"

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

export default function Signup({ name }: { name: string }) {
  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])

  return isJoinChecked ? (
    <div className={styles.additionalFormData}>
      <Input
        name="zipCode"
        label={intl.formatMessage({ id: "Zip code" })}
        registerOptions={{ required: true }}
      />
      <div className={styles.dateField}>
        <header>
          <Caption type="bold">
            <span className={styles.required}>
              {intl.formatMessage({ id: "Birth date" })}
            </span>
          </Caption>
        </header>
        <DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
      </div>
    </div>
  ) : (
    <Input
      label={intl.formatMessage({ id: "Membership no" })}
      name="membershipNo"
      type="tel"
    />
  )
}