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,
    metaContract: null,
    accounts:null
  }

  componentDidMount() {
    let testAbie = ''
    setTimeout(() => {
      if (typeof web3 !== 'undefined') {
        // web3 = new Web3(web3.currentProvider);
        this.setState({web3: true})
        let meta = contract(AbieFund)
        this.setState({metaContract: meta})
        let provider = new Web3.providers.HttpProvider(`http://${TESTRPC_HOST}:${TESTRPC_PORT}`)
        let metaCoinBalance = 0
        meta.setProvider(provider)
        const web3RPC = new Web3(provider)
        // Get accounts.
        web3RPC.eth.getAccounts((err, acc) => {
          console.log(err)
          console.log(acc)
          return meta.deployed()
            .then((contract) => this.setState({addressContract: contract.address}))
            .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.metaContract.at(this.state.addressContract)
      .then((contract) => contract.setDelegate(
        0,
        this.state.delegate,
        {from: '0x77282410cee8ee341510d966fa33845c1859e1f0'}
      ))
      .then((result) => console.log(result))
      .catch((err) => {
        console.error(err);
      })
  }

  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

@@ -484,20 +484,48 @@
 ccounts:
+ 
 null
+,%0A    askMembership: null,%0A
 %0A  %7D%0A%0A  
@@ -1370,17 +1370,16 @@
 e Mist%22)
-;
 %0A      %7D
@@ -1484,17 +1484,119 @@
 .value%7D)
-;
+%0A  %7D%0A%0A  handleChangeAskMembership = (event) =%3E %7B%0A    this.setState(%7BaskMembership: event.target.value%7D)
 %0A  %7D%0A%0A  
@@ -1610,23 +1610,16 @@
 gate = (
-address
 ) =%3E %7B%0A 
@@ -1783,52 +1783,416 @@
 om: 
-'0x77282410cee8ee341510d966fa33845c1859e1f0'
+this.state.addressContract%7D%0A      ))%0A      .then((result) =%3E console.log(result))%0A      .catch((err) =%3E %7B%0A        console.error(err);%0A      %7D)%0A  %7D%0A%0A  askMembership = () =%3E %7B%0A    this.state.metaContract.at(this.state.addressContract)%0A      .then((contract) =%3E contract.askMembership(%0A        %7B%0A          value: web3.toWei(this.state.askMembership, %22ether%22),%0A          from: this.state.addressContract%0A        
 %7D%0A  
@@ -2393,33 +2393,17 @@
        %3C
-ul%3E%0A          %3Cli
+p
 %3EBalance
@@ -2427,18 +2427,17 @@
 lance%7D%3C/
-li
+p
 %3E%0A      
@@ -2443,39 +2443,9 @@
    %3C
-/ul%3E%0A        %3Cul%3E%0A          %3Cli
+p
 %3E%0A  
@@ -2609,14 +2609,194 @@
     
-  %3C/li
+%3C/p%3E%0A        %3Cp%3E%0A            Ask Membership %3Cinput type=%22text%22 onChange=%7Bthis.handleChangeAskMembership%7D /%3E%0A            %3Cbutton onClick=%7Bthis.askMembership%7D%3ESubmit ask membership%3C/button
 %3E%0A  
@@ -2803,18 +2803,17 @@
       %3C/
-ul
+p
 %3E%0A      

add feature askMembership