/**
 * @file @todo no need for this when we have ./Label
 */
import React from 'react'

const LabelText = styled.div.attrs({
  className: 'label-text',
  role: 'label',
}) `
  margin-left: $spacing;
  @font(16,semi);
  color: $colors-blackrabbit;
  user-select: none;
  display: inline-block;
  line-height: 2rem;

  /* could pass the active prop to but meh */
  .active & {
    color: $colors-secondary;
  }
`

// @todo - use atoms/Text
const Text = styled.span.attrs({
  className: "label-text-style"
}) `
  display: inline-flex;
  color: inherit;

  ${props =>
    props.count &&
    styled.css `
      opacity: 0.8;
      /* padding-left: $spacing-extra-small; */
    `};
`

const Image = styled.img.attrs({
  src: props => props.image,
}) ` 
  display: inline-flex;
  width: rem(20);
    height: rem(15);
    margin: rem(0) rem(5);
`

const isValidCount = count => count && count.toString().includes('(') === false
// @todo - set as renders
const renderCount = count => {
  const text = isValidCount(count) ? `(${count})` : count
  return text && <Text count children={text} />
}
const renderText = text => {
  return text && <Text children={text} />
}

const renderColor = image => {
  return image && <Image image={image} />
}

/**
 * @description this is used in filters
 *              this is the textual styled label that goes INSIDE the <label>
 *
 * @type {React.LabelHTMLAttributes}
 * @type {React.StatelessComponent}
 */
class ToggleLabel extends React.PureComponent {
  static defaultProps = {
    shouldAlignRight: false,
    secondaryText: '',
    text: '',
    image: '',
  }
  renderContext = context => {
    const { text, secondaryText, image, ...remainingProps } = context

    // may want to wrap `text` too
    const countView = renderCount(secondaryText)
    const textView = renderText(text)
    const colorView = renderColor(image)

    return (
      <LabelText {...remainingProps}>
        {colorView}
        {textView}
        {countView}
      </LabelText>
    )
  }
  render() {
    return this.renderContext(this.props)
    // infinite loop xD
    // return <Consumer>{this.renderContext}</Consumer>
  }
}

export { ToggleLabel }
export default ToggleLabel