import { styled, useStyleConfig, vui } from '../core'
import { cs, filterUndefined } from '../utils'
import { useInputContext } from './context'
import { InputInputProps } from './input.types'

export const InputInputBase = styled.input`
  align-self: stretch;
  color: sandstone.10;
  background-color: transparent;
  border: none;
  border-radius: none;
  flex: 1;
  font-size: inherit;
  min-width: 0;
  outline: none;
  padding: 0 1;

  &[aria-disabled='true'],
  &[aria-disabled='true']::placeholder {
    cursor: not-allowed;
  }
`

/** Displays an input element within the Input component. */
export const InputInput = vui<'input', InputInputProps>((props, ref) => {
  const { className, autoComplete, ...rest } = props
  const inputProps = useInputContext()
  const mergedProps = { ...inputProps, ...props }
  const styles = useStyleConfig('Input', mergedProps)
  const aliasedProps = filterUndefined({
    'aria-disabled': mergedProps.disabled,
    'aria-label': mergedProps.ariaLabel,
  })

  return (
    <InputInputBase
      autoComplete={autoComplete}
      className={cs('vui-inputInput', className)}
      ref={ref}
      {...styles.input}
      {...aliasedProps}
      {...rest}
    />
  )
})

InputInput.displayName = 'InputInput'

export default InputInput
