import type { ChangeEvent, FocusEvent } from 'react'
import React from 'react'

import { T9n } from 'features/T9n'

import {
  WrapperProps,
  InputWrapper,
  InputStyled,
  Label,
  Error,
  Column,
} from './styled'

type Props = {
  defaultValue?: string,
  id: string,
  inputWidth?: number,
  label?: string,
  labelLexic?: string,
  labelWidth?: number,
  maxLength?: number,
  onBlur?: (event: FocusEvent<HTMLInputElement>) => void,
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void,
  pattern?: string,
  required?: boolean,
  title?: string,
  type?: string,
  value?: string,
} & WrapperProps

export const Input = ({
  defaultValue,
  error,
  id,
  inputWidth,
  label,
  labelLexic,
  labelWidth,
  maxLength,
  onBlur,
  onChange,
  paddingX,
  pattern,
  required,
  title,
  type,
  value,
  wrapperWidth,
}: Props) => (
  <Column>
    <InputWrapper
      wrapperWidth={wrapperWidth}
      paddingX={paddingX}
      error={error}
    >
      <Label
        htmlFor={id}
        labelWidth={labelWidth}
      >
        {
          labelLexic
            ? <T9n t={labelLexic} />
            : label
        }
      </Label>
      <InputStyled
        id={id}
        type={type}
        required={required}
        value={value}
        defaultValue={defaultValue}
        onChange={onChange}
        onBlur={onBlur}
        maxLength={maxLength}
        inputWidth={inputWidth}
        pattern={pattern}
        title={title}
      />
    </InputWrapper>
    <Error>{error && <T9n t={error} />}</Error>
  </Column>
)