import React from 'react';
import { ErrorMessage, useField } from 'formik';
import { InputFieldProps } from '../../interfaces';
import Typography from '../Typography';
import {
  Wrapper,
  InputWrapper,
  IconWrapper,
  InfoPanel,
  ErrorMessageWrapper,
} from './styles';
import EmojiInput from '../EmojiInput';
import colors from '../../theme/colors';
import InputFieldLabel from '../InputFieldLabel';
import InputFieldErrorMessage from '../InputFieldErrorMessage';

const InputField = ({
  label,
  dataCy,
  dataTestId,
  errorTestId,
  errorDataCy,
  variant,
  iconLeft,
  iconRight,
  required,
  placeholder,
  characterLimit,
  fullWidth,
  width,
  height,
  fontSize,
  fontWeight,
  withEmojis,
  isBottom,
  errorMessage,
  margin,
  firstInGroup,
  lastInGroup,
  infoTip,
  onChange,
  ...props
}: InputFieldProps) => {
  // @TODO: remove formik dependency (component breaks outside of formik context)
  const [field, { error, touched }] = useField(props);

  const errorState = !!errorMessage || (!!error && touched);

  return (
    <Wrapper
      error={errorState}
      variant={variant}
      iconLeft={iconLeft}
      iconRight={iconRight}
      fullWidth={fullWidth}
      width={width}
      height={height}
      withEmojis={withEmojis}
      characterLimit={characterLimit}
      margin={margin}
      fontSize={fontSize}
      fontWeight={field.value?.length ? fontWeight : undefined}
      className={
        firstInGroup
          ? 'input-group-first-item'
          : lastInGroup
          ? 'input-group-last-item'
          : undefined
      }
    >
      {label && (
        <InputFieldLabel
          label={label}
          name={field.name}
          infoTip={infoTip}
          required={required}
          errorState={errorState}
        />
      )}
      <InputWrapper>
        {withEmojis ? (
          <EmojiInput
            placeholder={placeholder}
            field={field}
            dataCy={dataCy}
            dataTestId={dataTestId}
            setFieldValue={props.setFieldValue}
            isBottom={isBottom}
            characterLimit={characterLimit}
          />
        ) : variant === 'multiline' ? (
          <>
            {characterLimit && (
              <InfoPanel>
                <Typography
                  variant={'utility4'}
                  color={
                    field.value?.length > characterLimit
                      ? colors.error[700]
                      : colors.neutral[400]
                  }
                >
                  {field.value?.length || 0}/{characterLimit}
                </Typography>
              </InfoPanel>
            )}
            <textarea
              data-cy={dataCy}
              data-testid={dataTestId}
              placeholder={placeholder}
              {...field}
              maxLength={props.maxLength}
              name={field.name}
              id={field.name}
              onChange={(e) => {
                onChange ? onChange(e) : field.onChange(e);
              }}
            />
          </>
        ) : (
          <input
            data-cy={dataCy}
            data-testid={dataTestId}
            placeholder={placeholder}
            {...field}
            {...props}
            id={field.name}
            name={field.name}
            onChange={(e) => {
              onChange ? onChange(e) : field.onChange(e);
            }}
          />
        )}
        {iconRight && (
          <IconWrapper iconPosition="right">{iconRight}</IconWrapper>
        )}
        {iconLeft && <IconWrapper iconPosition="left">{iconLeft}</IconWrapper>}
      </InputWrapper>
      <ErrorMessageWrapper className="input-field-error">
        {errorMessage ? (
          <InputFieldErrorMessage message={errorMessage} />
        ) : (
          <ErrorMessage
            name={field.name}
            data-testid={errorTestId}
            data-cy={errorDataCy}
            render={(message) => <InputFieldErrorMessage message={message} />}
          />
        )}
      </ErrorMessageWrapper>
    </Wrapper>
  );
};

export default InputField;