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,
    addressContract: null,
    delegate: null
  }

  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)
        return meta.deployed([
          '0x77282410cee8ee341510d966fa33845c1859e1f0',
          '0x63f2b18dced715721520d9a024886c7797be9e0e',
        ]).then((contract) => {
          this.setState({addressContract: contract.address})
          console.log(this.state)
          return contract.setDelegate(
            0,
            '0x77282410cee8ee341510d966fa33845c1859e1f0',
            {from: '0x77282410cee8ee341510d966fa33845c1859e1f0'}
          )}
        ).then((result) => console.log(result)).catch((err) => {
          console.error(err);
        })
      } else {
        alert("install Metamask or use Mist");
      }
    }, 1000)
  }

  handleChangeDelegate = (event) => {
    this.setState({delegate: event.target.value});
  }

  setDelegate = (address) => {
    this.state.meta.at(this.state.addressContract)
  }

  render() {
    return (
      <div id="container">
        <h1>Abie</h1>
        <ul>
          <li>Balance : {this.state.balance}</li>
        </ul>
        <ul>
          <li>Set Delegate <input type="text" onChange={this.handleChangeDelegate} /><button onClick={this.setDelegate}>Submit address</button></li>
        </ul>
      </div>
    )
  }
}

export default Proposal

@@ -445,16 +445,41 @@
 te: null
+,%0A    metaContract: null,
 %0A  %7D%0A%0A  
@@ -710,16 +710,60 @@
 ieFund)%0A
+        this.setState(%7BmetaContract: meta%7D)%0A
         
@@ -1071,16 +1071,25 @@
       %5D)
+%0A        
 .then((c
@@ -1396,16 +1396,25 @@
        )
+%0A        
 .then((r
@@ -1443,16 +1443,25 @@
 result))
+%0A        
 .catch((
@@ -1743,16 +1743,24 @@
 ate.meta
+Contract
 .at(this
@@ -1783,16 +1783,280 @@
 ntract)%0A
+      .then((contract) =%3E contract.setDelegate(%0A        0,%0A        this.state.delegate,%0A        %7Bfrom: '0x77282410cee8ee341510d966fa33845c1859e1f0'%7D%0A      ))%0A      .then((result) =%3E console.log(result))%0A      .catch((err) =%3E %7B%0A        console.error(err);%0A      %7D)%0A
   %7D%0A%0A  r
@@ -2231,16 +2231,29 @@
     %3Cli%3E
+%0A            
 Set Dele
@@ -2315,16 +2315,29 @@
 gate%7D /%3E
+%0A            
 %3Cbutton 
@@ -2386,16 +2386,27 @@
 /button%3E
+%0A          
 %3C/li%3E%0A  

add feature setDelegate