import MJMLColumnElement from '../decorators/MJMLColumnElement'
import React, { Component } from 'react'
import _ from 'lodash'
import numeral from 'numeral'

import MJTable from '../Table'

@MJMLColumnElement({
  tagName: 'mj-invoice',

  attributes: {
    'color': '#b9b9b9',
    'font-family': 'Roboto, Ubuntu, Helvetica, Arial, sans-serif',
    'font-size': '13px',
    'line-height': '22px',
    'border': '1px solid #ecedee'
  }
})
class Invoice extends Component {

  static baseStyles = {
    th: {
      padding: '10px 20px',
      fontWeight: 700,
      textTransform: 'uppercase',
      textAlign: 'left'
    }
  }

  constructor(props) {
    super(props)

    const format     = this.props.mjAttribute('format')
    const currencies = format.match(/([^-\d.,])/g)

    this.items    = props.mjChildren().filter((child) => child.get('tagName') === 'mj-invoice-item')
    this.format   = format.replace(/([^-\d.,])/g, '$')
    this.currency = (currencies) ? currencies[0] : null
  }

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

    const styles = _.merge({}, this.constructor.baseStyles, {
      table: {
        color: mjAttribute('color'),
        fontFamily: mjAttribute('font-family'),
        fontSize: mjAttribute('font-size'),
        lineHeight: mjAttribute('line-height')
      },
      th: {
        fontFamily: mjAttribute('font-family'),
        fontSize: mjAttribute('font-size'),
        lineHeight: mjAttribute('line-height'),
      },
      thead: {
        borderBottom: mjAttribute('border')
      },
      tfoot: {
        borderTop: mjAttribute('border')
      },
      total: {
        padding: '10px 20px',
        fontFamily: mjAttribute('font-family'),
        fontSize: mjAttribute('font-size'),
        fontWeight: 700,
        lineHeight: mjAttribute('line-height'),
        textAlign: 'right'
      }
    })

    styles.thQuantity = _.merge({}, styles.th, { textAlign: 'right' })

    return styles
  }

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

    return {
      table: {
        color: mjAttribute('color'),
        fontFamily: mjAttribute('font-family'),
        fontSize: mjAttribute('font-size'),
        lineHeight: mjAttribute('line-height')
      }
    }
  }

  total() {
    const format   = this.format
    const currency = this.currency
    const total    = this.items.reduce((prev, item) => {
      const unitPrice = parseFloat(numeral().unformat(item.getIn(['attributes', 'price'])))
      const quantity  = parseInt(item.getIn(['attributes', 'quantity']))

      return prev + unitPrice * quantity
    }, 0)

    return numeral(total).format(format).replace(/([^-\d.,])/g, currency)
  }

  render() {
    const attrs  = this.getAttributes()
    const styles = this.getStyles()
    const { renderChildren, mjAttribute } = this.props

    return (
      <MJTable {...attrs.table}>
        <thead>
          <tr style={styles.thead}>
            <th style={styles.th}>Product</th>
            <th style={styles.th}>Price</th>
            <th style={styles.thQuantity}>Quantity</th>
          </tr>
        </thead>
        {renderChildren()}
        <tfoot>
          <tr style={styles.tfoot}>
            <th style={styles.th} colSpan="2">Total: </th>
            <td style={styles.total}>{this.total()}</td>
          </tr>
        </tfoot>
      </MJTable>
    )
  }
}

export default Invoice

@@ -423,16 +423,74 @@
 #ecedee'
+,%0A%0A    'transl': 'name:Name;price:Price;quantity:Quantity'
 %0A  %7D%0A%7D)%0A
@@ -678,16 +678,135 @@
  %7D%0A  %7D%0A%0A
+  static transl = %7B%0A    name    : 'Name',%0A    price   : 'Price',%0A    quantity: 'Quantity',%0A    total   : 'Total:'%0A  %7D%0A%0A
   constr
@@ -2408,17 +2408,338 @@
 %0A  %7D%0A%0A  
-t
+getTranslations() %7B%0A    const %7B mjAttribute %7D = this.props%0A%0A    const transl = _.cloneDeep(this.constructor.transl)%0A%0A    mjAttribute('transl').split(';').forEach((t) =%3E %7B%0A      if (t && t.indexOf(':') != -1) %7B%0A        t = t.split(':')%0A        transl%5Bt%5B0%5D.trim()%5D = t%5B1%5D.trim()%0A      %7D%0A    %7D)%0A%0A    return transl%0A  %7D%0A%0A  getT
 otal() %7B
@@ -3188,34 +3188,119 @@
 nst 
-attrs  = this.getAttribute
+%7B renderChildren %7D = this.props%0A%0A    const attrs  = this.getAttributes()%0A    const transl = this.getTranslation
 s()%0A
@@ -3331,24 +3331,25 @@
 getStyles()%0A
+%0A
     const %7B 
@@ -3350,52 +3350,32 @@
 nst 
-%7B renderChildren, mjAttribute %7D = this.props
+total  = this.getTotal()
 %0A%0A  
@@ -3508,15 +3508,24 @@
 th%7D%3E
-Product
+%7Btransl%5B'name'%5D%7D
 %3C/th
@@ -3560,21 +3560,33 @@
 les.th%7D%3E
-P
+%7Btransl%5B'p
 rice
+'%5D%7D
 %3C/th%3E%0A  
@@ -3625,24 +3625,36 @@
 antity%7D%3E
-Q
+%7Btransl%5B'q
 uantity
+'%5D%7D
 %3C/th%3E%0A  
@@ -3813,15 +3813,25 @@
 %222%22%3E
-T
+%7Btransl%5B't
 otal
-: 
+'%5D%7D
 %3C/th
@@ -3874,20 +3874,13 @@
 l%7D%3E%7B
-this.
 total
-()
 %7D%3C/t

Add transl attributes