import _ from 'lodash'
import postcss from 'postcss'

const variantGenerators = {
  hover: (container, config) => {
    const cloned = container.clone()

    cloned.walkRules(rule => {
      rule.selector = `.hover${config.options.separator}${rule.selector.slice(1)}:hover`
    })

    return cloned.nodes
  },
  focus: (container, config) => {
    const cloned = container.clone()

    cloned.walkRules(rule => {
      rule.selector = `.focus${config.options.separator}${rule.selector.slice(1)}:focus`
    })

    return cloned.nodes
  },
}

export default function(config) {
  return function(css) {
    const unwrappedConfig = config()

    css.walkAtRules('variants', atRule => {
      const variants = postcss.list.comma(atRule.params)

      if (variants.includes('responsive')) {
        const responsiveParent = postcss.atRule({ name: 'responsive' })
        atRule.before(responsiveParent)
        responsiveParent.append(atRule)
      }

      atRule.before(atRule.clone().nodes)

      _.forEach(['focus', 'hover'], variant => {
        if (variants.includes(variant)) {
          atRule.before(variantGenerators[variant](atRule, unwrappedConfig))
        }
      })

      atRule.remove()
    })
  }
}

@@ -271,39 +271,49 @@
 er%60%0A    %7D)%0A%0A    
-return 
+container.before(
 cloned.nodes%0A  %7D
@@ -304,24 +304,25 @@
 cloned.nodes
+)
 %0A  %7D,%0A  focu
@@ -519,23 +519,33 @@
 %7D)%0A%0A    
-return 
+container.before(
 cloned.n
@@ -548,16 +548,17 @@
 ed.nodes
+)
 %0A  %7D,%0A%7D%0A
@@ -1107,30 +1107,16 @@
         
-atRule.before(
 variantG
@@ -1158,17 +1158,16 @@
 dConfig)
-)
 %0A       

Move responsibility for appending nodes into variant generators themselves