// @flow
import React from 'react'
import styled from 'react-emotion'
import withProps from 'recompose/withProps'
import { cond, equals, propSatisfies, T } from 'ramda'
import { fontSize, fontWeight, space, color, textStyle, themeGet } from 'styled-system'
import { DecalLabel } from '../Decal'
import { shouldForwardProp } from '../../utils'

const getColor = (props) => {
  switch (props.color) {
    case 'tealBlue':
      return {
        color: themeGet('colors.tealBlue', '#1B8D97')(props),
      }
    case 'darkGray':
    default:
      return {
        color: themeGet('colors.darkGray', '#4A4A4A')(props),
      }
  }
}

const Label = withProps({
  fontSize: 2,
  mb: 2,
})(styled('label', { shouldForwardProp })(
  {
    display: 'flex',
    alignItems: 'center',
  },
  textStyle,
  fontSize,
  fontWeight,
  color,
  space,
  ({ color: propColor, hidden, letterSpacing }) => (
    hidden
      ? {
        position: 'absolute !important',
        height: 1,
        width: 1,
        overflow: 'hidden',
        clip: 'rect(1px, 1px, 1px, 1px)',
        marginBottom: 0,
      }
      : {
        letterSpacing: letterSpacing && `${letterSpacing}`,
        ...getColor({ color: propColor }),
      }
  ),
))

export default (props: { modifier?: ?string }) => cond([
  [propSatisfies(equals('decal'), 'modifier'), () => <DecalLabel {...props} />],
  [T, () => <Label {...props} />],
])(props)