import { cx } from "class-variance-authority"
import {
  type ForwardedRef,
  forwardRef,
  useId,
  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)

  // Unique id is required for multiple inputs of same name appearing multiple times
  // on same page. This will inherited by parent label element.
  // Shouldn't really be needed if we don't set id though.
  const uniqueId = useId()
  const inputId = `${uniqueId}-${props.name}`

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

  return (
    <AriaLabel className={styles.container}>
      <Body asChild fontOnly>
        <AriaInput
          {...props}
          className={cx(styles.input, props.className)}
          ref={ref}
          id={inputId}
        />
      </Body>
      <Label required={props.required}>{label}</Label>
    </AriaLabel>
  )
})

export default AriaInputWithLabel
