import React from 'react'
// import { ROOT } from 'exotic'
// import { always } from 'chain'
import { decorateWithStyledSelector } from './styledSelector'
import {
  getSelectors,
  hasSelectors,
  hasNoSelectors,
  fromSelectorsAndStylesToBlock,
} from './selectors'

function selectorAndStyleForStyledComponent(css, Target) {
  if (hasNoSelectors(css)) {
    const result = decorateWithStyledSelector(Target)

    // same value is returned, we cannot change the target
    // diff value means it returned our className
    const className = result === Target ? getSelectors(Target) : result

    const selector = '.' + className + '>:last-child'

    // console.info('WITHOUT_SELECTOR_BEFORE', { css, className })
    css = fromSelectorsAndStylesToBlock(selector, css)
    // console.info('WITHOUT_SELECTOR_AFTER', css)

    return { className, css }
  }

  return {
    css,
  }
}


function addIdentity(Target) {
  // Target.render() {
  //   rendered = super.render()
  //   // rendered.__internalInstance.id
  //   // const id = rendered.props.id
  //   id = rendered.props.id = hashcode()
  //   this.styles.setId(id)
  //   return [styles, rendered]
  // }
  // id = rendered.props.id = hashcode()
  // this.styles.setId(id)
  // return [styles, rendered]
}


function withStyles(Target, styles, styleString) {
  Target.styles = styles

  class Selectorless extends Target {
    // state = { styleString }
    constructor(props) {
      super(props)
      this.state = this.state || { styleString }
    }

    render() {
      console.dir({ rendered: this.state.styleString })
      const rendered = super.render()
      if (styleString) {
        const styleBlock = (
          <style>
            {this.state.styleString}
          </style>
        )
        return [styleBlock, rendered]
      }
      return rendered
    }
  }
}

// if (styleString) {
//   const styleBlock = (
//     <style>
//       {styleString}
//     </style>
//   )
//   return [styleBlock, rendered]
// }
// return rendered
// ---
// Target.prototype.componentWillMount = async function() {
//   this.setState({ styleString })
// }
// ---