import { has } 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')};
    `
  }
  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`
  display: inline-block;
  font-style: ${props => props.fontStyle || 'normal'};
  text-align: ${props => props.align || 'start'};
  ${fontSize};
  ${textHelper};
  ${marginHelper};
  ${paddingHelper};
`