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

import Button from "@/components/TempDesignSystem/Button"
import CheckboxCard from "@/components/TempDesignSystem/Form/Card/Checkbox"
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 { detailsSchema, signedInDetailsSchema } from "./schema"

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

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

export default function Details({ user }: DetailsProps) {
  const intl = useIntl()

  const list = [
    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
    { title: intl.formatMessage({ id: "Join at no cost" }) },
  ]

  const methods = useForm<DetailsSchema>({
    defaultValues: {
      countryCode: user?.address?.countryCode ?? "",
      email: user?.email ?? "",
      firstname: user?.firstName ?? "",
      lastname: user?.lastName ?? "",
      phoneNumber: user?.phoneNumber ?? "",
    },
    criteriaMode: "all",
    mode: "all",
    resolver: zodResolver(user ? signedInDetailsSchema : detailsSchema),
    reValidateMode: "onChange",
  })

  return (
    <FormProvider {...methods}>
      <section className={styles.container}>
        <header>
          <Body color="uiTextHighContrast" textTransform="bold">
            {intl.formatMessage({ id: "Guest information" })}
          </Body>
        </header>
        <form className={styles.form}>
          <Input
            label={intl.formatMessage({ id: "Firstname" })}
            name="firstname"
            readOnly={!!user}
            registerOptions={{ required: true }}
          />
          <Input
            label={intl.formatMessage({ id: "Lastname" })}
            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 }}
          />
        </form>
        <footer className={styles.footer}>
          {user ? null : (
            <CheckboxCard
              list={list}
              saving
              subtitle={intl.formatMessage(
                {
                  id: "{difference}{amount} {currency}",
                },
                {
                  amount: "491",
                  currency: "SEK",
                  difference: "-",
                }
              )}
              title={intl.formatMessage({ id: "Join Scandic Friends" })}
            />
          )}
          <Button
            disabled={!methods.formState.isValid}
            intent="secondary"
            size="small"
            theme="base"
          >
            {intl.formatMessage({ id: "Proceed to payment method" })}
          </Button>
        </footer>
      </section>
    </FormProvider>
  )
}
