import React from 'react';
import { bool, string, object } from 'prop-types';
import styled from 'styled-components';
import classnames from 'classnames';
import { REM_UNIT_XSM, REM_UNIT_MD, REM_FONT_SIZE___SM, SUNSET_ORANGE, ISABELLINE } from '@vincent_za/styles';
import { ErrorField } from '../../Error';

import { CLASSNAME_PLACEHOLDER, CLASSNAME_HAS_VALUE } from '../constants';
import Placeholder, { STYLES_PLACEHOLDER_ACTIVE } from '../Placeholder/component';

export const CN_TEXT_FIELD = 'text-field';

const Wrap = styled.div`
  display: ${props => props.isHidden ? 'none' : 'flex'};
  position: relative;
  align-items: center;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
`;

const errorStyles = `
  color: ${SUNSET_ORANGE} !important;
  box-shadow: 0 1px 0 ${SUNSET_ORANGE} !important;

  &:focus {
    box-shadow: 0 1px 0 ${SUNSET_ORANGE} !important;
  }
`;

const activeStylesTextField = `
  padding: ${REM_UNIT_MD} 0 ${REM_UNIT_XSM};
`;

const TextFieldStyled = styled.input`
  display: flex;
  width: 100%;
  height: 3.2rem;
  background-color: transparent;
  box-shadow: 0 1px 0 0 #ECF0E8;
  color: #777;

  &:focus {
    box-shadow: 0 1px 0 ${ISABELLINE};
    ${activeStylesTextField};
  };

  ${props => props.touched && props.error && errorStyles};
  ${props => props.hasValue && activeStylesTextField};
  ${props => props.isUnstyledPlaceholder && activeStylesTextField};

  ${props => props.isDisabled && `
    pointer-events: none;
    color: rgba(255, 255, 255, 0.2);
  `};

  &:focus + ${Placeholder} {
    ${STYLES_PLACEHOLDER_ACTIVE};
  };
`;

const AfterText = styled.div`
  position: absolute;
  right: 0;
  bottom: 0.5rem;
  font-size: ${REM_FONT_SIZE___SM};
`;

class TextField extends React.PureComponent {
  render() {
    const {
      isHidden,
      isDisabled,
      isUnstyledPlaceholder,
      isInCombo,
      input,
      type,
      placeholder,
      afterText,
      meta: { touched, error },
      className,
      id,
    } = this.props;
    const isError = touched && error;
    const hasValue = input.value !== '';

    return (
      <Wrap isDisabled={isDisabled} isHidden={isHidden}>
        <TextFieldStyled
          {...input}
          isDisabled={isDisabled}
          isUnstyledPlaceholder={isUnstyledPlaceholder}
          isInCombo={isInCombo}
          hasValue={hasValue}
          type={type}
          touched={touched}
          error={error}
          className={classnames(className, CN_TEXT_FIELD, { [CLASSNAME_HAS_VALUE]: hasValue })}
          id={id}
          placeholder={isUnstyledPlaceholder ? placeholder : ''}
          tabIndex={isDisabled ? -1 : 0}
          onChange={input.onChange}
        />
        {
          !isUnstyledPlaceholder && placeholder &&
          <Placeholder
            hasValue={hasValue}
            isError={isError}
            isDisabled={isDisabled}
            className={CLASSNAME_PLACEHOLDER}
          >
            {placeholder}
          </Placeholder>
        }
        {afterText && <AfterText>{afterText}</AfterText>}
        <ErrorField fieldStatus={{ isError, errorMessage: error }} />
      </Wrap>
    );
  }
}

TextField.propTypes = {
  isHidden: bool,
  isDisabled: bool,
  isUnstyledPlaceholder: bool,
  isInCombo: bool,
  className: string,
  input: object.isRequired,
  type: string,
  placeholder: string,
  afterText: string,
  meta: object.isRequired,
  id: string,
};

TextField.defaultProps = {
  isHidden: false,
  isDisabled: false,
  isUnstyledPlaceholder: false,
  isInCombo: false,
  className: '',
  type: 'text',
  placeholder: '',
  afterText: undefined,
  id: undefined,
};

export default TextField;
