"use client"
import {
  Input as AriaInput,
  Label as AriaLabel,
  Text,
  TextField,
} from "react-aria-components"
import { Controller, useFormContext } from "react-hook-form"

import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

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

import type { HTMLAttributes, WheelEvent } from "react"

import type { InputProps } from "./input"

export default function Input({
  "aria-label": ariaLabel,
  disabled = false,
  helpText = "",
  label,
  name,
  placeholder = "",
  registerOptions = {},
  type = "text",
}: InputProps) {
  const { control } = useFormContext()
  let numberAttributes: HTMLAttributes<HTMLInputElement> = {}
  if (type === "number") {
    numberAttributes.onWheel = function (evt: WheelEvent<HTMLInputElement>) {
      evt.currentTarget.blur()
    }
  }
  return (
    <Controller
      disabled={disabled}
      control={control}
      name={name}
      rules={registerOptions}
      render={({ field, fieldState }) => (
        <TextField
          aria-label={ariaLabel}
          isDisabled={field.disabled}
          isInvalid={fieldState.invalid}
          isRequired={!!registerOptions.required}
          name={field.name}
          onBlur={field.onBlur}
          onChange={field.onChange}
          validationBehavior="aria"
          value={field.value}
        >
          <AriaLabel className={styles.container} htmlFor={field.name}>
            <Body asChild fontOnly>
              <AriaInput
                {...numberAttributes}
                aria-labelledby={field.name}
                className={styles.input}
                id={field.name}
                placeholder={placeholder}
                type={type}
              />
            </Body>
            <Label required={!!registerOptions.required}>{label}</Label>
          </AriaLabel>
          {helpText && !fieldState.error ? (
            <Caption asChild color="black">
              <Text className={styles.helpText} slot="description">
                <CheckIcon height={20} width={30} />
                {helpText}
              </Text>
            </Caption>
          ) : null}
          {fieldState.error ? (
            <Caption className={styles.error} fontOnly>
              <InfoCircleIcon color="red" />
              {fieldState.error.message}
            </Caption>
          ) : null}
        </TextField>
      )}
    />
  )
}
