// @flow
import StylEh from 'modules/view-container/styles/styleh'
import _insertRulePlugin from 'modules/view-container/styles/stylis-rule-sheet'
import transpileStyles from 'modules/view-container/styles/transpileStyles'
import { Interpolation } from '../types'

const stylisSplitter = new StylEh({
  global: false,
  cascade: false,
  keyframe: false,
  prefix: false,
  compress: false,
  semicolon: false,
})

const stylis = new StylEh({
  global: false,
  cascade: true,
  keyframe: false,
  prefix: true,
  compress: false,
  semicolon: true,
})

// Wrap `insertRulePlugin to build a list of rules,
// and then make our own plugin to return the rules. This
// makes it easier to hook into the existing SSR architecture

let parsingRules = []
// eslint-disable-next-line consistent-return
const returnRulesPlugin = context => {
  if (context === -2) {
    const parsedRules = parsingRules
    parsingRules = []
    return parsedRules
  }
}

const parseRulesPlugin = _insertRulePlugin(rule => {
  parsingRules.push(rule)
})

stylis.use([parseRulesPlugin, returnRulesPlugin])
stylisSplitter.use([parseRulesPlugin, returnRulesPlugin])

// const matchComment = /^\s*\/\/.*$/gm

const stringifyRules = (
  rules: Array<Interpolation>,
  selector: string,
  prefix: string
): Array<string> => {
  // replace JS comments
  // @todo
  // const flatCSS = rules.join('').replace(matchComment, '')
  const flatCSS = rules.join('').replace(/^\s*\/\/.*$/gm, '')

  const cssStr =
    selector && prefix ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS
  const preCompiled = cssStr
  const namespace = prefix || !selector ? '' : selector

  const postRendered = transpileStyles(preCompiled)
  // console.log({ postRendered })
  return stylis(namespace, postRendered)
}

export const splitByRules = (css: string): Array<string> =>
  stylisSplitter('', css)

export default stringifyRules