web/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx

"use client"

import { forwardRef, type HTMLAttributes, type WheelEvent } from "react"
import { Text, TextField } from "react-aria-components"
import { Controller, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"

import Caption from "@scandic-hotels/design-system/Caption"
import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"

import { getErrorMessage } from "@/utils/getErrorMessage"

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

import type { InputProps } from "./input"

const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  {
    "aria-label": ariaLabel,
    autoComplete,
    className = "",
    disabled = false,
    helpText = "",
    label,
    maxLength,
    name,
    placeholder,
    readOnly = false,
    registerOptions = {},
    type = "text",
    hideError,
    inputMode,
  },
  ref
) {
  const intl = useIntl()
  const { control, formState } = useFormContext()
  const 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}
          className={className}
          isDisabled={field.disabled}
          isReadOnly={readOnly}
          isInvalid={fieldState.invalid}
          isRequired={!!registerOptions.required}
          name={field.name}
          onBlur={field.onBlur}
          onChange={field.onChange}
          validationBehavior="aria"
          value={field.value}
        >
          <InputWithLabel
            {...field}
            ref={ref}
            aria-labelledby={field.name}
            autoComplete={autoComplete}
            id={field.name}
            label={label}
            maxLength={maxLength}
            placeholder={placeholder}
            readOnly={readOnly}
            disabled={disabled}
            required={!!registerOptions.required}
            type={type}
            inputMode={inputMode}
          />
          {helpText && !fieldState.error ? (
            <Caption asChild color="black">
              <Text className={styles.helpText} slot="description">
                <MaterialIcon icon="check" size={20} />
                {helpText}
              </Text>
            </Caption>
          ) : null}
          {fieldState.error && !hideError ? (
            <ErrorMessage
              errors={formState.errors}
              name={name}
              messageLabel={getErrorMessage(intl, fieldState.error.message)}
            />
          ) : null}
        </TextField>
      )}
    />
  )
})
export default Input