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

import { paddingHelper, marginHelper } from './styledHelpers'

const textHelper = props => {
  if (has(props, 'secondary')) {
    return css`
      color: ${th('colorSecondary')};
      font-family: ${th('fontReading')};
    `
  }
  if (has(props, 'error')) {
    return css`
      color: ${th('colorError')};
      font-family: ${th('fontReading')};
    `
  }
  if (has(props, 'customId')) {
    return css`
      color: ${th('colorPrimary')};
      font-family: ${th('fontInterface')};
    `
  }
  if (has(props, 'labelLine')) {
    return css`
      color: ${th('colorFurnitureHue')};
      font-family: ${th('fontInterface')};
      display: flex;
      &:after {
        display: block;
        content: ' ';
        border-bottom: 1px solid ${th('colorBorder')};
        flex: 1 1 auto;
        margin-left: calc(${th('gridUnit')} * 2);
      }
    `
  }
  return css`
    color: ${th('colorText')};
    font-family: ${th('fontReading')};
  `
}

const fontSize = css`
  font-size: ${props =>
    props.small ? th('fontSizeBaseSmall') : th('fontSizeBase')};
  line-height: ${props =>
    props.small ? th('lineHeightBaseSmall') : th('lineHeightBase')};
`

/** @component */
export default styled.span`
  align-items: center;
  display: ${props => get(props, 'display', 'inline-block')};
  font-style: ${props => props.fontStyle || 'normal'};
  text-align: ${props => props.align || 'start'};
  ${fontSize};
  ${textHelper};
  ${marginHelper};
  ${paddingHelper};
`