"use client"
import { useEffect } from "react"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"

import CountrySelect from "@/components/TempDesignSystem/Form/Country"
import Input from "@/components/TempDesignSystem/Form/Input"
import Phone from "@/components/TempDesignSystem/Form/Phone"
import Body from "@/components/TempDesignSystem/Text/Body"

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

import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"

interface ModifyContactProps {
  guest: BookingConfirmation["booking"]["guest"]
  isFirstStep: boolean
}

export default function ModifyContact({
  guest,
  isFirstStep,
}: ModifyContactProps) {
  const intl = useIntl()
  const { getValues, setValue } = useFormContext()

  useEffect(() => {
    setValue("firstName", guest.firstName ?? "")
    setValue("lastName", guest.lastName ?? "")
    setValue("email", guest.email ?? "")
    setValue("phoneNumber", guest.phoneNumber ?? "")
    setValue("countryCode", guest.countryCode ?? "")
  }, [guest, setValue])

  return (
    <>
      {isFirstStep ? (
        <div className={styles.container}>
          <div className={`${styles.row} ${styles.gridEqual}`}>
            <Input
              label={intl.formatMessage({
                defaultMessage: "First name",
              })}
              maxLength={30}
              name="firstName"
              disabled={!!guest.firstName}
            />
            <Input
              label={intl.formatMessage({
                defaultMessage: "Last name",
              })}
              maxLength={30}
              name="lastName"
              disabled={!!guest.lastName}
            />
          </div>
          <div className={styles.row}>
            <CountrySelect
              label={intl.formatMessage({
                defaultMessage: "Country",
              })}
              name="countryCode"
            />
          </div>
          <div className={styles.row}>
            <Input
              label={intl.formatMessage({
                defaultMessage: "Email",
              })}
              name="email"
              type="email"
              registerOptions={{ required: true }}
            />
          </div>
          <div className={styles.row}>
            <Phone
              label={intl.formatMessage({
                defaultMessage: "Phone number",
              })}
              name="phoneNumber"
              registerOptions={{ required: true }}
            />
          </div>
        </div>
      ) : (
        <>
          <Body color="uiTextHighContrast">
            {intl.formatMessage({
              defaultMessage:
                "Are you sure you want to change your guest details?",
            })}
          </Body>
          <div className={styles.container}>
            <Body color="uiTextHighContrast" textTransform="bold">
              {getValues("firstName")} {getValues("lastName")}
            </Body>
            <Body color="uiTextHighContrast">{getValues("email")}</Body>
            <Body color="uiTextHighContrast">{getValues("phoneNumber")}</Body>
          </div>
        </>
      )}
    </>
  )
}
