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

import { getDefaultCountryFromLang } from "@scandic-hotels/common/utils/phone"
import Body from "@scandic-hotels/design-system/Body"
import CountrySelect from "@scandic-hotels/design-system/Form/Country"
import Phone from "@scandic-hotels/design-system/Form/Phone"

import Input from "@/components/TempDesignSystem/Form/Input"
import useLang from "@/hooks/useLang"
import { getFormattedCountryList } from "@/utils/countries"
import { getErrorMessage } from "@/utils/getErrorMessage"

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

import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"

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

export default function ModifyContact({
  guest,
  isFirstStep,
}: ModifyContactProps) {
  const intl = useIntl()
  const lang = useLang()
  const {
    getValues,
    setValue,
    formState: { errors },
  } = 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({
                id: "common.firstName",
                defaultMessage: "First name",
              })}
              maxLength={30}
              name="firstName"
              disabled={!!guest.firstName}
            />
            <Input
              label={intl.formatMessage({
                id: "common.lastName",
                defaultMessage: "Last name",
              })}
              maxLength={30}
              name="lastName"
              disabled={!!guest.lastName}
            />
          </div>
          <div className={styles.row}>
            <CountrySelect
              countries={getFormattedCountryList(intl)}
              errorMessage={getErrorMessage(
                intl,
                errors.countryCode?.message?.toString()
              )}
              label={intl.formatMessage({
                id: "common.country",
                defaultMessage: "Country",
              })}
              lang={lang}
              name="countryCode"
            />
          </div>
          <div className={styles.row}>
            <Input
              label={intl.formatMessage({
                id: "common.email",
                defaultMessage: "Email",
              })}
              name="email"
              type="email"
              registerOptions={{ required: true }}
            />
          </div>
          <div className={styles.row}>
            <Phone
              countryLabel={intl.formatMessage({
                id: "common.countryCode",
                defaultMessage: "Country code",
              })}
              countriesWithTranslatedName={getFormattedCountryList(intl)}
              defaultCountryCode={getDefaultCountryFromLang(lang)}
              errorMessage={getErrorMessage(
                intl,
                errors.phoneNumber?.message?.toString()
              )}
              label={intl.formatMessage({
                id: "common.phoneNumber",
                defaultMessage: "Phone number",
              })}
              name="phoneNumber"
              registerOptions={{ required: true }}
            />
          </div>
        </div>
      ) : (
        <>
          <Body color="uiTextHighContrast">
            {intl.formatMessage({
              id: "myStay.modifyContact.confirmationMessage",
              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>
        </>
      )}
    </>
  )
}
