"use client"

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

import { BreakfastIcon, NoBreakfastIcon } from "@/components/Icons"
import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"

import { breakfastSchema } from "./schema"

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

import type { BreakfastSchema } from "@/types/components/enterDetails/breakfast"
import { breakfastEnum } from "@/types/enums/breakfast"

export default function Breakfast() {
  const intl = useIntl()

  const methods = useForm<BreakfastSchema>({
    criteriaMode: "all",
    mode: "all",
    resolver: zodResolver(breakfastSchema),
    reValidateMode: "onChange",
  })

  return (
    <FormProvider {...methods}>
      <form className={styles.form}>
        <RadioCard
          Icon={BreakfastIcon}
          id={breakfastEnum.BREAKFAST}
          name="breakfast"
          // @ts-expect-error - Types mismatch docs as this is
          // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
          subtitle={intl.formatMessage(
            { id: "<b>{amount} {currency}</b>/night per adult" },
            {
              amount: "150",
              b: (str) => <b>{str}</b>,
              currency: "SEK",
            }
          )}
          text={intl.formatMessage({
            id: "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.",
          })}
          title={intl.formatMessage({ id: "Breakfast buffet" })}
          value={breakfastEnum.BREAKFAST}
        />
        <RadioCard
          Icon={NoBreakfastIcon}
          id={breakfastEnum.NO_BREAKFAST}
          name="breakfast"
          subtitle={intl.formatMessage(
            { id: "{amount} {currency}" },
            {
              amount: "0",
              currency: "SEK",
            }
          )}
          text={intl.formatMessage({
            id: "You can always change your mind later and add breakfast at the hotel.",
          })}
          title={intl.formatMessage({ id: "No breakfast" })}
          value={breakfastEnum.NO_BREAKFAST}
        />
      </form>
    </FormProvider>
  )
}