"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useCallback } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"

import { useEnterDetailsStore } from "@/stores/enter-details"

import { registerUserBookingFlow } from "@/actions/registerUserBookingFlow"
import Button from "@/components/TempDesignSystem/Button"
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 { guestDetailsSchema, signedInDetailsSchema } from "./schema"
import Signup from "./Signup"

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

import type {
  DetailsProps,
  DetailsSchema,
} from "@/types/components/hotelReservation/enterDetails/details"

const formID = "enter-details"
export default function Details({ user }: DetailsProps) {
  const intl = useIntl()
  const initialData = useEnterDetailsStore((state) => ({
    countryCode: state.userData.countryCode,
    email: state.userData.email,
    firstName: state.userData.firstName,
    lastName: state.userData.lastName,
    phoneNumber: state.userData.phoneNumber,
    join: state.userData.join,
    dateOfBirth: state.userData.dateOfBirth,
    zipCode: state.userData.zipCode,
    termsAccepted: state.userData.termsAccepted,
  }))

  const methods = useForm<DetailsSchema>({
    defaultValues: {
      countryCode: user?.address?.countryCode ?? initialData.countryCode,
      email: user?.email ?? initialData.email,
      firstName: user?.firstName ?? initialData.firstName,
      lastName: user?.lastName ?? initialData.lastName,
      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
      //@ts-expect-error: We use a literal for join to be true or false, which does not convert to a boolean
      join: initialData.join,
      dateOfBirth: initialData.dateOfBirth,
      zipCode: initialData.zipCode,
      termsAccepted: initialData.termsAccepted,
    },
    criteriaMode: "all",
    mode: "all",
    resolver: zodResolver(user ? signedInDetailsSchema : guestDetailsSchema),
    reValidateMode: "onChange",
  })

  const completeStep = useEnterDetailsStore((state) => state.completeStep)

  // const errorMessage = intl.formatMessage({
  //   id: "An error occurred. Please try again.",
  // })

  const onSubmit = useCallback(
    async function (values: DetailsSchema) {
      if (values.join) {
        const signupVals = {
          firstName: values.firstName,
          lastName: values.lastName,
          email: values.email,
          phoneNumber: values.phoneNumber,
          address: {
            zipCode: values.zipCode,
            countryCode: values.countryCode,
          },
          dateOfBirth: values.dateOfBirth,
        }

        const res = await registerUserBookingFlow(signupVals)
        if (!res.success) {
          // if (res.error) {
          //   toast.error(res.error)
          // } else {
          //   toast.error(errorMessage)
          // }
          return
        }
        console.log("Signed up user: ", res)
      }
      completeStep(values)
    },

    [completeStep]
  )

  return (
    <FormProvider {...methods}>
      <section className={styles.container}>
        <header>
          <Body color="uiTextHighContrast" textTransform="bold">
            {intl.formatMessage({ id: "Guest information" })}
          </Body>
        </header>
        <form
          className={styles.form}
          id={formID}
          onSubmit={methods.handleSubmit(onSubmit)}
        >
          <Input
            label={intl.formatMessage({ id: "First name" })}
            name="firstName"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <Input
            label={intl.formatMessage({ id: "Last name" })}
            name="lastName"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <CountrySelect
            className={styles.country}
            label={intl.formatMessage({ id: "Country" })}
            name="countryCode"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <Input
            className={styles.email}
            label={intl.formatMessage({ id: "Email address" })}
            name="email"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <Phone
            className={styles.phone}
            label={intl.formatMessage({ id: "Phone number" })}
            name="phoneNumber"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          {user ? null : <Signup name="join" />}
        </form>
        <footer className={styles.footer}>
          <Button
            disabled={!methods.formState.isValid}
            form={formID}
            intent="secondary"
            size="small"
            theme="base"
            type="submit"
          >
            {intl.formatMessage({ id: "Proceed to payment method" })}
          </Button>
        </footer>
      </section>
    </FormProvider>
  )
}
