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,
  RED_ORANGE,
  COLOR_FORM_FIELD_BORDER,
  COLOR_FORM_FIELD_BORDER_OPAQUE,
  GRAY_X11,
  ISABELLINE,
} from '@vincent_za/styles';

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

const Wrap = styled.div`
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 1rem 1rem;
    border-color: transparent transparent ${COLOR_FORM_FIELD_BORDER_OPAQUE} transparent;
    pointer-events: none;
  };
`;

const Error = styled.div`
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: ${REM_UNIT_XSM};
  font-size: ${REM_FONT_SIZE___SM};
  color: ${RED_ORANGE};
`;

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

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

const activeStylesTextArea = `
  padding: ${REM_UNIT_MD} 0 ${REM_UNIT_XSM} 1px;
`;

const PlaceholderStyled = styled(Placeholder)`
  top: 2rem;
  ${props => props.hasValue && STYLES_PLACEHOLDER_ACTIVE};
`;

const TextAreaInput = styled.textarea`
  display: flex;
  border: 0;
  padding: 0 0 0 1px;
  flex-grow: 1;
  width: 100%;
  height: 4rem;
  background-color: transparent;
  box-shadow: inset -1px -1px 0 ${COLOR_FORM_FIELD_BORDER};
  color: ${GRAY_X11};
  outline: none;

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

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

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

  &:focus + ${PlaceholderStyled} {
    ${STYLES_PLACEHOLDER_ACTIVE};
  };
  ${props => props.isHidden && 'display: none'};
`;

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

    return (
      <Wrap isDisabled={isDisabled}>
        <TextAreaInput
          {...input}
          isHidden={isHidden}
          isDisabled={isDisabled}
          hasValue={hasValue}
          touched={touched}
          error={error}
          className={classnames(className, { [CLASSNAME_HAS_VALUE]: hasValue })}
          id={id}
          tabIndex={isDisabled ? -1 : 0}
          onChange={input.onChange}
        />
        {
          placeholder &&
          <PlaceholderStyled
            hasValue={hasValue}
            isError={isError}
            isDisabled={isDisabled}
            className={CLASSNAME_PLACEHOLDER}
          >
            {placeholder}
          </PlaceholderStyled>
        }
        {
          isError &&
          <Error>{error}</Error>
        }
      </Wrap>
    );
  }
}

TextArea.propTypes = {
  isHidden: bool,
  isDisabled: bool,
  className: string,
  input: object.isRequired,
  placeholder: string,
  meta: object.isRequired,
  id: string,
};

TextArea.defaultProps = {
  isHidden: false,
  isDisabled: false,
  className: '',
  placeholder: '',
  id: undefined,
};

export default TextArea;
