import styled, {css} from 'styled-components'
import classNames from 'classnames'
import _get from 'lodash/get'

import {scale} from '../utilStyles'
import {StyledSignalList} from '../SignalList'

const markAsMandatory = () => css`
  label:after {
    content: '*';
    padding-left: ${props => scale.space(props, -3)};
  }
`

const colorizeByCondition = ({dirty, hasError, theme}) =>
  hasError
    ? _get(theme, 'colors.signal.danger.text')
    : dirty
      ? _get(theme, 'colors.signal.warning.text')
      : _get(theme, 'colors.text')

const StyledFormFieldWrapper = styled.div.attrs(props => ({
  className: classNames(props.className, 'form-group')
}))`
  && {
    ${props => props.mandatory && markAsMandatory()}
    color: ${props => colorizeByCondition(props)}

    ${StyledSignalList} {
      margin-top: ${props => scale.space(props, -2)};
      padding-left: ${props => scale.space(props, -1)};
    }
  }
`

export default StyledFormFieldWrapper

@@ -275,33 +275,24 @@
 ing-left: $%7B
-props =%3E 
 scale.space(
@@ -291,23 +291,16 @@
 e.space(
-props, 
 -3)%7D;%0A  
@@ -791,33 +791,24 @@
 rgin-top: $%7B
-props =%3E 
 scale.space(
@@ -807,23 +807,16 @@
 e.space(
-props, 
 -2)%7D;%0A  
@@ -835,25 +835,16 @@
 left: $%7B
-props =%3E 
 scale.sp
@@ -851,15 +851,8 @@
 ace(
-props, 
 -1)%7D

scale functions receives props implicitly