import React from 'react'
import {
  renderCount as defaultRenderCount,
  renderText as defaultRenderText,
  renderColor as defaultRenderColor,
} from './_renderProps'
import { ToggleLabelProps } from './typings'
import { LabelText } from './_styled'

class ToggleLabel extends React.PureComponent<ToggleLabelProps> {
  static defaultProps = {
    nowrap: false,
    shouldAlignRight: false,
    secondaryText: '',
    text: '',
    image: '',
    renderCount: defaultRenderCount,
    renderText: defaultRenderText,
    renderColor: defaultRenderColor,
  }
  renderContext = (context: ToggleLabelProps) => {
    const {
      text,
      secondaryText,
      image,
      renderCount,
      renderText,
      renderColor,
      ...remainingProps
    } = context

    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)
  }
}

export { ToggleLabel }
export default ToggleLabel