"use client"

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

import Caption from "@scandic-hotels/design-system/Caption"
import DateSelect from "@scandic-hotels/design-system/Form/Date"

import useLang from "../../../../../hooks/useLang"
import BookingFlowInput from "../../../../BookingFlowInput"
import { getErrorMessage } from "../../../../BookingFlowInput/errors"

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

export default function Signup({
  errors,
  name,
  registerOptions,
}: {
  errors: FieldErrors
  name: string
  registerOptions?: RegisterOptions
}) {
  const intl = useIntl()
  const lang = useLang()

  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}>
      <BookingFlowInput
        name="zipCode"
        label={intl.formatMessage({
          defaultMessage: "Zip code",
        })}
        registerOptions={{ required: true, ...registerOptions }}
      />
      <div className={styles.dateField}>
        <header>
          <Caption type="bold">
            <span className={styles.required}>
              {intl.formatMessage({
                defaultMessage: "Birth date",
              })}
            </span>
          </Caption>
        </header>
        <DateSelect
          labels={{
            day: intl.formatMessage({ defaultMessage: "Day" }),
            month: intl.formatMessage({ defaultMessage: "Month" }),
            year: intl.formatMessage({ defaultMessage: "Year" }),
            errorMessage: getErrorMessage(
              intl,
              errors["dateOfBirth"]?.message?.toString()
            ),
          }}
          lang={lang}
          name="dateOfBirth"
          registerOptions={{ required: true, ...registerOptions }}
        />
      </div>
    </div>
  ) : (
    <BookingFlowInput
      label={intl.formatMessage({
        defaultMessage: "Membership ID",
      })}
      name="membershipNo"
      type="tel"
      registerOptions={registerOptions}
    />
  )
}