import app from 'ampersand-app'
import React from 'react'
import Router from 'react-router'
let { RouteHandler } = Router

import Mui from 'material-ui'
var { FlatButton } = Mui

// var log = require('bows')('manageProduct.js')

let ManageProduct = React.createClass({

  contextTypes: {
    router: React.PropTypes.func
  },

	getInitialState () {
    return {
      productId: this.props.params.productId,
      contact: null,
      product: null
    }
  },

  componentDidMount () {
    let self = this
    app.contacts.getOrFetch(self.props.params.productId,
      {all: true},
      function (err, contact) {
        if (err) {
          console.error('contact not found', err)
        }
        self.setState({contact: contact})
      }
    )
    app.products.getOrFetch(self.props.params.productId,
      {all: true},
      function (err, model) {
        if (err) {
          console.error('model not found', err)
        }
        self.setState({product: model})
      }
    )
  },

  toEditProduct () {
    let { productId } = this.state
    let { router } = this.context
    router.transitionTo('editProduct', {productId: productId})
  },

  toAddCodes () {
    let { productId } = this.state
    let { router } = this.context
    router.transitionTo('addCodes', {productId: productId})
  },

  toProductStats () {
    let { productId } = this.state
    let { router } = this.context
    router.transitionTo('productStats', {productId: productId})
  },

  render () {

    let buttonStyle = {
      height: '50',
      opacity: '0.9',
      float: 'right'
    }

    if (this.state.product && this.state.contact) {
      return (
        <div>
          <div style={{position: 'fixed', top: '0', left: '0', zIndex: '9' }} >
            <FlatButton label='Stats'
              style={buttonStyle}
              onClick={this.toProductStats}
              secondary={true} />
            <FlatButton label='Edit Product'
              style={buttonStyle}
              onClick={this.toEditProduct}
              secondary={true} />
            <FlatButton label='Add Codes'
              style={buttonStyle}
              onClick={this.toAddCodes}
              secondary={true} />
          </div>
          <RouteHandler {...this.state}/>
        </div>
      )
    } else {
      return (
        <div>
          LOADING PRODUCT...
        </div>
      )
    }
  }
})

module.exports = ManageProduct

@@ -1301,169 +1301,8 @@
 %7D,%0A%0A
-  toProductStats () %7B%0A    let %7B productId %7D = this.state%0A    let %7B router %7D = this.context%0A    router.transitionTo('productStats', %7BproductId: productId%7D)%0A  %7D,%0A%0A
   re
@@ -1571,158 +1571,8 @@
 %7D %3E%0A
-            %3CFlatButton label='Stats'%0A              style=%7BbuttonStyle%7D%0A              onClick=%7Bthis.toProductStats%7D%0A              secondary=%7Btrue%7D /%3E%0A
     

remove product stats