import { cx } from "class-variance-authority"
import {
  type ForwardedRef,
  forwardRef,
  useImperativeHandle,
  useRef,
} from "react"
import { Input as AriaInput, Label as AriaLabel } from "react-aria-components"

import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"

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

import type { AriaInputWithLabelProps } from "./input"

const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
  { label, ...props }: AriaInputWithLabelProps,
  forwardedRef: ForwardedRef<HTMLInputElement>
) {
  const ref = useRef<HTMLInputElement>(null)

  useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement)

  return (
    <AriaLabel
      className={styles.container}
      // fixes an issue with mobile devices being unable to
      // focus because the input height is 0
      onTouchStart={() => {
        if (ref.current) {
          ref.current.focus()
        }
      }}
    >
      <Body asChild fontOnly>
        <AriaInput
          {...props}
          className={cx(styles.input, props.className)}
          ref={ref}
        />
      </Body>
      <Label required={props.required}>{label}</Label>
    </AriaLabel>
  )
})

export default AriaInputWithLabel
