import { get } from 'lodash'
import { th } from '@pubsweet/ui-toolkit'
import styled, { css } from 'styled-components'

import { marginHelper } from '.'

const minHeight = props => css`
  min-height: calc(${th('gridUnit')} * ${get(props, 'minHeight', 2)});
`

const Textarea = styled.textarea`
  border-radius: ${th('borderRadius')};
  border-color: ${({ hasError }) =>
    hasError ? th('colorError') : th('colorFurniture')};
  font-size: ${th('fontSizeBase')};
  font-family: ${th('fontWriting')};
  padding: ${th('gridUnit')};
  width: 100%;
  resize: vertical;

  ${minHeight};
  ${marginHelper};

  &:focus,
  &:active {
    border-color: ${th('textField.activeBorder')};
    outline: none;
  }

  &:read-only {
    background-color: ${th('colorBackgroundHue')};
  }
`

/** @component */
export default Textarea