import { MJMLElement, helpers, elements } from 'mjml-core'
import React, { Component } from 'react'

const tagName = 'mj-container'
const defaultMJMLDefinition = {
  attributes: {
    'width': '600'
  },
  inheritedAttributes: [
    'width'
  ]
}
const postRender = $ => {
  const containerWidth = $('.mj-container').data('width')

  $('.mj-container-outlook-open').each(function () {
    $(this).replaceWith(`<!--[if mso]>
      <table border="0" cellpadding="0" cellspacing="0" width="${containerWidth}" align="center" style="width:${containerWidth}px;"><tr><td>
      <![endif]-->`)
  })

  $('.mj-container-outlook-line').each(function () {
    $(this).replaceWith(`<!--[if mso]>
      </td></tr></table>
      <![endif]-->
      <!--[if mso]>
      <table border="0" cellpadding="0" cellspacing="0" width="${containerWidth}" align="center" style="width:${containerWidth}px;"><tr><td>
      <![endif]-->`)
  })

  $('.mj-container-outlook-close').each(function () {
    $(this).replaceWith(`<!--[if mso]>
      </td></tr></table>
      <![endif]-->`)
  })

  $('container')
    .css({ background: $('.mj-container').data('background-color') })
    .each(function () {
      if ($(this).attr('style') === '') {
        $(this).removeAttr('style')
      }
    })

  $('.mj-container')
    .removeAttr('data-background-color')
    .removeAttr('data-width')
    .removeAttr('class')
    .each(function () {
      if ($(this).attr('style') === '') {
        $(this).removeAttr('style')
      }
    })

  return $
}
const schemaXsd = () =>  (
  `<xs:complexType name="body">
    <xs:sequence>
      <xs:element name="mj-container" type="container" minOccurs="1" maxOccurs="1" />
    </xs:sequence>
  </xs:complexType>`
)

@MJMLElement
class Container extends Component {

  styles = this.getStyles()

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

    return {
      div: {
        backgroundColor: mjAttribute('background-color'),
        fontSize: defaultUnit(mjAttribute('font-size'), "px")
      }
    }
  }

  render () {
    const { renderWrappedOutlookChildren, mjAttribute, children } = this.props
    const { width } = helpers.widthParser(mjAttribute('width'))

    return (
      <div
        className="mj-container"
        data-background-color={mjAttribute('background-color')}
        data-width={width}
        style={this.styles.div}>
        {renderWrappedOutlookChildren(children)}
      </div>
    )
  }

}

Container.tagName = tagName
Container.defaultMJMLDefinition = defaultMJMLDefinition
Container.postRender = postRender
Container.schemaXsd = schemaXsd

// Support V1.X MJML mj-body
elements["mj-body"] = Container

export default Container

@@ -190,16 +190,18 @@
 h': '600
+px
 '%0A  %7D,%0A 
@@ -1532,17 +1532,16 @@
  = () =%3E
- 
  (%0A  %60%3Cx
@@ -1560,16 +1560,19 @@
 e name=%22
+mj-
 body%22%3E%0A 
@@ -1632,16 +1632,19 @@
 %22 type=%22
+mj-
 containe
@@ -2013,12 +2013,12 @@
 '), 
-%22px%22
+'px'
 )%0A  
@@ -2089,16 +2089,29 @@
 hildren,
+ defaultUnit,
  mjAttri
@@ -2182,16 +2182,28 @@
 hParser(
+defaultUnit(
 mjAttrib
@@ -2214,16 +2214,23 @@
 'width')
+, 'px')
 )%0A%0A    r
@@ -2670,25 +2670,25 @@
 lements%5B
-%22
+'
 mj-body
-%22
+'
 %5D = Cont

Add xsd for mj-container