import { ComponentType } from 'react'
import { toComponentName } from '@skava/identifier/dist/index'
//
import { asStyledComponent } from './StyledComponent'
import { templateHandler } from './templateHandler'
import { Styleh } from './styled-components/typings'

/**
 * @todo optimize
 */

function toComponent(styles: string) {
  /**
   * @type {React.StatelessComponent}
   * @return {StyledComponent}
   */
  return function styledComponentStatelessFactory() {
    return function styledComponentStateless() {
      return asStyledComponent(styles)
    }
  }
}

// ignore this
var styled

/**
 * @description transpile
 * @see templateHandler
 * @param {Array<String>} literalSections
 * @param {TemplateStringsArray | ?Array<String | Function | Array>} interpolationSubstitutions
 * @return {ClassDecorator}
 */
function _styleh(this: any) {
  // --- stylehg transpiling ---

  const styles = templateHandler.apply(this, arguments)

  /**
   * @param Target @curried 1
   * @modifies render to add an array of elements
   */
  function styledDecorator(Target?: ComponentType) {
    // --- decorator ---

    // @james @todo split
    if (Target === undefined) {
      return styledDecorator
    } else if (!Target.prototype) {
      // @note moved this below as `toComponent`
      // then it is props
      // if (Object.isExtensible(Target) === false && Object.isFrozen(Target)) {
      //   return asStyledComponent(styles, Target)
      // }

      console.warn('NO_PROTOTYPE_DECORATOR_STYLED')
      console.log(Target)
      return styledDecorator
    }

    // --- style react block ---

    const named = toComponentName(Target)
    const stylesBlock = asStyledComponent(styles, Target)
    const className = ''

    // ---- react component decoration ----

    const { render } = Target.prototype

    Target.prototype.render = function() {
      const rendered = render.call(this, this)

      // @todo could use traverser?
      // @note - this is when not using [children, syntax]
      // @todo + this identifies className
      //
      // import {selectorAndStyleForStyledComponent} from './selectorless'
      //
      // const { css, selector, className } = selectorAndStyleForStyledComponent(styles, rendered)
      // const finalStylesBeforeTranspile = css ? css : styles
      // const stylesBlock = asStyledComponent(styles, Target)
      //
      // return (
      //   <div data-styled-for-component={named} className={className || 'styled-wrap'}>
      //     {stylesBlock}
      //     {rendered}
      //   </div>
      // )

      // @todo - errors with render keys...
      // const key = named + Math.random(0, 1000000)
      // const cloned = React.cloneElement(rendered, { key })

      return [stylesBlock, rendered]
    }

    return Target
  }

  /**
   * @description this allows decorated styles
   *              to be coerced from decorator back to styles
   *
   * @type {Function | String}
   * @return {String}
   */
  styledDecorator.toString = styledDecorator[Symbol.toPrimitive] = function() {
    return styles
  }
  styledDecorator.styles = styledDecorator
  styledDecorator.toComponent = toComponent(styles)

  return styledDecorator
}

const styleh = (_styleh as any) as Styleh
styled = (styleh as any) as Styleh

/**
 * @description skips parsing, just returns as string, for easy change
 */
function styledMixin(this: any, mixinStyles: TemplateStringsArray): string {
  return styled.apply(this, arguments)

  /**
   * @todo - this returns raw input, often is an array, the above parses it immediately, should use template handler
   */
  // return mixinStyles
  // if (Array.isArray(mixinStyles)) {
  //   return mixinStyles.map(style => style.raw).join('\n')
  // } else {
  //   return mixinStyles
  // }
}
styleh.mixin = styledMixin
styleh.theme = (templateHandler as any).theme
styleh.setTheme = templateHandler.setTheme

export { styleh as stylin }
export default styleh