import { MJMLElement, helpers } from 'mjml-core'
import merge from 'lodash/merge'
import React, { Component } from 'react'

const tagName = 'mj-group'
const parentTag = ['mj-section', 'mj-navbar']
const defaultMJMLDefinition = {
  attributes: {
    'width': null,
    'background-color': null,
    'vertical-align': null
  }
}
const baseStyles = {
  div: {
    verticalAlign: 'top'
  }
}
const postRender = $ => {
  $('.mj-group-outlook-open').each(function () {
    const $columnDiv = $(this).next()

    $(this).replaceWith(`${helpers.startConditionalTag}
      <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:${$columnDiv.data('vertical-align')};width:${parseInt($(this).data('width'))}px;">
      ${helpers.endConditionalTag}`)

    $columnDiv.removeAttr('data-vertical-align')
  })

  $('.mj-group-outlook-line').each(function () {
    const $columnDiv = $(this).next()

    $(this).replaceWith(`${helpers.startConditionalTag}
    </td><td style="vertical-align:${$columnDiv.data('vertical-align')};width:${parseInt($(this).data('width'))}px;">
      ${helpers.endConditionalTag}`)

    $columnDiv.removeAttr('data-vertical-align')
  })

  $('.mj-group-outlook-close').each(function () {
    $(this).replaceWith(`${helpers.startConditionalTag}
      </td></tr></table>
      ${helpers.endConditionalTag}`)
  })

  return $
}

@MJMLElement
class Group extends Component {

  styles = this.getStyles()

  getStyles () {
    const { mjAttribute } = this.props

    return merge({}, baseStyles, {
      div: {
        display: 'inline-block',
        verticalAlign: mjAttribute('vertical-align'),
        fontSize: '0px',
        lineHeight: '0px',
        textAlign: 'left',
        width: '100%'
      },
      table: {
        verticalAlign: mjAttribute('vertical-align'),
        background: mjAttribute('background-color')
      }
    })
  }

  getGroupClass () {
    const { mjAttribute, sibling } = this.props
    const width = mjAttribute('width')
    const parentWidth = this.props.parentWidth || mjAttribute('parentWidth')

    if (width == undefined) {
      return `mj-column-per-${parseInt(100 / sibling)}`
    }

    const { width: parsedWidth, unit } = helpers.widthParser(width)

    switch (unit) {
      case '%':
        return `mj-column-per-${parsedWidth}`

      case 'px':
        const percentWidth = parseInt(width) / parentWidth * 100
        return `mj-column-per-${percentWidth}`
    }
  }

  renderChildren () {
    const { children } = this.props

    return children.map(child => React.cloneElement(child, { mobileWidth: "mobileWidth" }))
  }

  render () {
    const { mjAttribute, sibling, renderWrappedOutlookChildren } = this.props
    const width = mjAttribute('width') || (100 / sibling)
    const mjGroupClass = this.getGroupClass()

    return (
      <div
        aria-labelledby={mjGroupClass}
        className={mjGroupClass}
        data-column-width={parseInt(width)}
        data-vertical-align={this.styles.div.verticalAlign}
        style={this.styles.div}>
        {renderWrappedOutlookChildren(this.renderChildren())}
      </div>
    )
  }

}

Group.tagName = tagName
Group.baseStyles = baseStyles
Group.postRender = postRender
Group.parentTag = parentTag
Group.defaultMJMLDefinition = defaultMJMLDefinition

export default Group

@@ -471,34 +471,191 @@
 st $
-columnDiv = $(this).next()
+parent = $(this).parent()%0A    const mjGroupBg = $parent.data('mj-group-background')%0A    const $columnDiv = $(this).next()%0A    const bgColor = mjGroupBg ? %60bgcolor=%22$%7BmjGroupBg%7D%22%60 : %60%60
 %0A%0A  
@@ -720,16 +720,27 @@
   %3Ctable
+ $%7BbgColor%7D
  role=%22p
@@ -938,32 +938,83 @@
 ditionalTag%7D%60)%0A%0A
+    $parent.removeAttr('data-mj-group-background')%0A
     $columnDiv.r
@@ -1771,24 +1771,77 @@
      div: %7B%0A
+        background: mjAttribute('background-color'),%0A
         disp
@@ -2020,138 +2020,8 @@
 0%25'%0A
-      %7D,%0A      table: %7B%0A        verticalAlign: mjAttribute('vertical-align'),%0A        background: mjAttribute('background-color')%0A
     
@@ -3160,16 +3160,83 @@
 lAlign%7D%0A
+        data-mj-group-background=%7BmjAttribute('background-color')%7D%0A
         

fix background on mj-group