import React, {Component} from 'react'
import request from 'superagent'
import { default as Web3 } from 'web3'
import { default as contract } from 'truffle-contract'
import AbieFund from '../../build/contracts/AbieFund.json'

import '../www/styles/Proposal.scss'

const TESTRPC_HOST = 'localhost'
const TESTRPC_PORT = '8545'

class Proposal extends Component {

  state = {
    web3: false,
    balance: 0,
  }

  componentDidMount() {
    let testAbie = ''
    setTimeout(() => {
      if (typeof web3 !== 'undefined') {
        // web3 = new Web3(web3.currentProvider);
        this.setState({web3: true})
        let meta = contract(AbieFund)
        let provider = new Web3.providers.HttpProvider(`http://${TESTRPC_HOST}:${TESTRPC_PORT}`)
        let metaCoinBalance = 0
        meta.setProvider(provider)
        meta.deployed(['0x77282410cee8ee341510d966fa33845c1859e1f0', '0x63f2b18dced715721520d9a024886c7797be9e0e'])
          .then((instance) => {
            let contract = instance;
            testAbie = `Metacoin address: ${instance.address}`
            return contract.setDelegate(0,'0x77282410cee8ee341510d966fa33845c1859e1f0',{from: '0x77282410cee8ee341510d966fa33845c1859e1f0'})
          // }).then((result) => {
          //   this.setState({balance: result.toNumber()})
          //   return contract.setDelegate(0,'0x77282410cee8ee341510d966fa33845c1859e1f0',{from: '0x77282410cee8ee341510d966fa33845c1859e1f0'})
          }).then((result) => {
            console.log(result)
          }).catch(function(err) {
            console.error(err)
          });
      } else {
        alert("install Metamask or use Mist");
      }
    }, 1000)
  }

  render() {
    return (
      <div id="container">
        <h1>Abie</h1>
        <ul>
          <li>Balance : {this.state.balance}</li>
        </ul>
      </div>
    )
  }
}

export default Proposal

@@ -400,16 +400,62 @@
 nce: 0,%0A
+    addressContract: null,%0A    delegate: null%0A
   %7D%0A%0A  c
@@ -853,24 +853,31 @@
 er)%0A        
+return 
 meta.deploye
@@ -879,16 +879,27 @@
 ployed(%5B
+%0A          
 '0x77282
@@ -935,16 +935,26 @@
 59e1f0',
+%0A         
  '0x63f2
@@ -994,21 +994,18 @@
 e0e'
-%5D)%0A  
+,%0A
         
 .the
@@ -1004,23 +1004,25 @@
     
+%5D)
 .then((
-instance
+contract
 ) =%3E
@@ -1038,331 +1038,91 @@
     
-  let contract = instance;%0A            testAbie = %60Metacoin address: $%7Binstance.address%7D%60%0A            return contract.setDelegate(0,'0x77282410cee8ee341510d966fa33845c1859e1f0',%7Bfrom: '0x77282410cee8ee341510d966fa33845c1859e1f0'%7D)%0A          // %7D).then((result) =%3E %7B%0A          //   
+this.setState(%7BaddressContract: contract.address%7D)%0A          console.log(
 this.s
-etS
 tate
-(%7Bbalance: result.toNumber()%7D
 )%0A  
@@ -1126,21 +1126,16 @@
 %0A       
-   //
    retur
@@ -1157,18 +1157,44 @@
 elegate(
-0,
+%0A            0,%0A            
 '0x77282
@@ -1230,16 +1230,29 @@
 59e1f0',
+%0A            
 %7Bfrom: '
@@ -1295,17 +1295,16 @@
 59e1f0'%7D
-)
 %0A       
@@ -1306,17 +1306,27 @@
         
-%7D
+)%7D%0A        
 ).then((
@@ -1335,30 +1335,16 @@
 sult) =%3E
- %7B%0A           
  console
@@ -1359,46 +1359,27 @@
 ult)
-%0A          %7D).catch(function
+).catch(
 (err) 
+=%3E 
 %7B%0A
-  
     
@@ -1402,19 +1402,18 @@
 ror(err)
+;
 %0A
-  
         
@@ -1414,17 +1414,16 @@
       %7D)
-;
 %0A      %7D
@@ -1509,138 +1509,495 @@
 %0A%0A  
-render() %7B%0A    return (%0A      %3Cdiv id=%22container%22%3E%0A        %3Ch1%3EAbie%3C/h1%3E%0A        %3Cul%3E%0A          %3Cli%3EBalance : %7Bthis.state.balance%7D
+handleChangeDelegate = (event) =%3E %7B%0A    this.setState(%7Bdelegate: event.target.value%7D);%0A  %7D%0A%0A  setDelegate = (address) =%3E %7B%0A    this.state.meta.at(this.state.addressContract)%0A  %7D%0A%0A  render() %7B%0A    return (%0A      %3Cdiv id=%22container%22%3E%0A        %3Ch1%3EAbie%3C/h1%3E%0A        %3Cul%3E%0A          %3Cli%3EBalance : %7Bthis.state.balance%7D%3C/li%3E%0A        %3C/ul%3E%0A        %3Cul%3E%0A          %3Cli%3ESet Delegate %3Cinput type=%22text%22 onChange=%7Bthis.handleChangeDelegate%7D /%3E%3Cbutton onClick=%7Bthis.setDelegate%7D%3ESubmit address%3C/button%3E
 %3C/li

add setDelegate feature (WIP)