'use strict'

import c from 'classnames'
import { EOL } from 'os'
import PropTypes from 'prop-types'
import React from 'react'
import { ThemeValues } from 'the-component-constants'
import { styleString } from 'the-style-util'

/**
 * Style of the-components
 */
class TheStyle extends React.PureComponent {
  static styles(values) {
    return Object(values)
  }

  /** @deprecated */
  static styleString() {
    console.warn(`[TheStyle] TheStyle.styleString is now deprecated`)
    return styleString(...arguments)
  }

  /** @deprecated */
  static styleStringFromStyles(styles) {
    return styleString.fromStyles(styles)
  }

  getChildrenAsString() {
    const { children } = this.props
    if (!children) {
      return null
    }
    return []
      .concat(children)
      .map((child) => {
        return child
      })
      .join(EOL)
  }

  getInnerHTML() {
    return [this.getStylesAsString(), this.getChildrenAsString()]
      .filter(Boolean)
      .join(EOL)
  }

  getStylesAsString() {
    const { prefix, styles } = this.props
    if (!styles) {
      return null
    }
    return Object.keys(styles)
      .map((selector) =>
        styleString(
          [prefix, selector].filter(Boolean).join(' '),
          styles[selector],
        ),
      )
      .filter(Boolean)
      .join(EOL)
  }

  render() {
    const { props } = this
    const { className, id, type } = props
    return (
      <style
        className={c('the-style', className)}
        {...{ id, type }}
        dangerouslySetInnerHTML={{ __html: this.getInnerHTML() }}
      />
    )
  }
}

TheStyle.propTypes = {
  /** CSS class name */
  className: PropTypes.string,
  /** DOM Id */
  id: PropTypes.string,
  /** Style selector prefix */
  prefix: PropTypes.string,
  /** Script type */
  type: PropTypes.string,
}

TheStyle.defaultProps = {
  className: null,
  id: null,
  prefix: null,
  type: null,
}

TheStyle.displayName = 'TheStyle'

TheStyle.ThemeValues = ThemeValues

export default TheStyle