// @flow
import React, { PureComponent } from 'react'
import { prop } from 'ramda'
import styled from 'react-emotion'
import { space, themeGet } from 'styled-system'
import withProps from 'recompose/withProps'
import Box from '../Box'
import ErrorMessage from '../ErrorMessage'
import Label from '../Label'
import { isNotEmptyOrNotNil, shouldForwardProp } from '../../utils'
import { type InputType, type MetaType } from '../../types'

const Input = withProps({
  px: 3,
  py: 3,
})(styled('textarea', { shouldForwardProp })(
  {
    borderRadius: 6,
    border: 0,
    height: 100,
    outline: 'none',
    resize: 'none',
    width: '100%',
    '@media print': {
      border: '1px solid',
    },
  },
  space,
  props => ({
    fontSize: themeGet('fontSizes[1]', '12')(props),
    backgroundColor: themeGet('colors.inputGray', '#F0F0F0')(props),
    '&:focus': {
      backgroundColor: themeGet('colors.white', '#FFFFFF')(props),
      border: `solid 1px ${themeGet('colors.lighterGray', '#E6E7E8')(props)}`,
    },
    '::placeholder': {
      fontFamily: themeGet('primaryFont', 'Montserrat, -apple-system, sans-serif')(props),
    },
  }),
))

type Props = {
  name: string,
  input?: InputType,
  label: string,
  meta?: MetaType,
  noLabel?: boolean,
  placeholder: string,
  readOnly?: boolean,
}

class Textarea extends PureComponent<Props> {
  static defaultProps = {
    noLabel: false,
    input: { name: null },
    meta: { touched: false, error: '' },
    readOnly: false,
  }

  render() {
    const { input, label, meta, name, noLabel, placeholder, readOnly, ...styles } = this.props
    return (
      // $FlowFixMe
      <Box maxWidth={[336, 'none']} {...styles}>
        <Label htmlFor={name} hidden={noLabel}>
          {noLabel === true ? placeholder : label}
        </Label>
        <Input
          {...input}
          id={name}
          name={name}
          placeholder={placeholder}
          readOnly={readOnly}
        />
        { prop('touched', meta) === true && isNotEmptyOrNotNil(prop('error', meta))
          && (
          <ErrorMessage
            message={prop('error', meta)}
            maxWidth={116}
          />
          )
        }
      </Box>
    )
  }
}

export default Textarea