import type { ChangeEvent, FocusEvent } from 'react'
import { useRouteMatch } from 'react-router-dom'

import { T9n } from 'features/T9n'
import { useLexicsStore } from 'features/LexicsStore'
import { Icon } from 'features/Icon'

import { PAGES } from 'config'

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

type Props = {
  autoComplete?: string,
  className?: string,
  defaultValue?: string,
  disabled?: boolean,
  editIcon?: boolean,
  iconName?: string,
  inputWidth?: number,
  label?: string,
  labelAfter?: string,
  labelAfterLexic?: string,
  labelLexic?: string,
  labelWidth?: number,
  maxLength?: number,
  onBlur?: (event: FocusEvent<HTMLInputElement>) => void,
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void,
  onFocus?: (event: FocusEvent<HTMLInputElement>) => void,
  pattern?: string,
  required?: boolean,
  title?: string,
  toolTip?: string,
  type?: string,
  value?: string,
  withError?: boolean,
  wrapperHeight?: number,
} & WrapperProps

export const Input = ({
  autoComplete = '',
  className,
  defaultValue,
  disabled,
  editIcon = false,
  error,
  iconName,
  inputWidth,
  label,
  labelAfter,
  labelAfterLexic,
  labelLexic,
  labelWidth,
  maxLength,
  onBlur,
  onChange,
  onFocus,
  pattern,
  required,
  title,
  toolTip,
  type,
  value,
  withError = true,
  wrapperHeight,
  wrapperWidth,
}: Props) => {
  const { translate } = useLexicsStore()
  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.path === PAGES.useraccount

  return (
    <Column isUserAccountPage={isUserAccountPage} className={className}>
      <InputWrapper
        wrapperWidth={wrapperWidth}
        wrapperHeight={wrapperHeight}
        hasRightIcon={editIcon}
        error={error}
      >
        <Label>
          <LabelTitle labelWidth={labelWidth} isUserAccountPage={isUserAccountPage}>
            {labelLexic ? <T9n t={labelLexic} /> : label}
            {toolTip && <ScTooltip className='Highlight__Tooltip'><T9n t={toolTip} /></ScTooltip>}
          </LabelTitle>
          <InputStyled
            autoComplete={autoComplete}
            type={type}
            required={required}
            value={value}
            defaultValue={defaultValue}
            disabled={disabled}
            onChange={onChange}
            onBlur={onBlur}
            onFocus={onFocus}
            maxLength={maxLength}
            inputWidth={inputWidth}
            pattern={pattern}
            title={title}
            placeholder={translate(labelLexic || '')}
            isUserAccountPage={isUserAccountPage}
          />
          {value && (
            <LabelAfter>
              {labelAfterLexic ? <T9n t={labelAfterLexic} /> : labelAfter}
            </LabelAfter>
          )}
          {iconName
            && <Icon size={15} color='white' refIcon={iconName} className={`${iconName}__input`} />}
        </Label>
      </InputWrapper>
      {withError && <Error t={error || ''} />}
    </Column>
  )
}
