import type { InputHTMLAttributes, ReactNode } from 'react'

import { useLexicsStore } from 'features/LexicsStore'

import {
  Wrapper,
  InputStyled,
  Label,
} from './styled'

type Props = Pick<InputHTMLAttributes<HTMLInputElement>, (
  'autoComplete' |
  'autoFocus' |
  'className' |
  'disabled' |
  'name' |
  'onBlur' |
  'onChange' |
  'onFocus' |
  'type' |
  'placeholder' |
  'value'
)> & {
  leftContent?: ReactNode,
  placeholderLexic?: string,
  rightContent?: ReactNode,
}

export const Input = ({
  autoComplete,
  autoFocus,
  className,
  disabled,
  leftContent,
  name,
  onBlur,
  onChange,
  onFocus,
  placeholder,
  placeholderLexic = '',
  rightContent,
  type,
  value,
}: Props) => {
  const { translate } = useLexicsStore()

  return (
    <Wrapper className={className}>
      <Label>
        {leftContent}
        <InputStyled
          autoComplete={autoComplete}
          autoFocus={autoFocus}
          disabled={disabled}
          onBlur={onBlur}
          onChange={onChange}
          onFocus={onFocus}
          placeholder={placeholder ?? translate(placeholderLexic)}
          type={type}
          value={value}
          name={name}
        />
        {rightContent}
      </Label>
    </Wrapper>
  )
}