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 '../Label'

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

import type { InputProps } from './types'
import { Typography } from '../Typography'

const InputComponent = forwardRef(function AriaInputWithLabelComponent(
  { label, ...props }: InputProps,
  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}>
      <Typography variant="Body/Paragraph/mdRegular">
        <AriaInput
          {...props}
          placeholder={props.placeholder}
          className={cx(styles.input, props.className)}
          ref={ref}
          id={inputId}
        />
      </Typography>
      <Label required={props.required}>{label}</Label>
    </AriaLabel>
  )
})

export const Input = InputComponent as React.ForwardRefExoticComponent<
  InputProps & React.RefAttributes<HTMLInputElement>
>