import React , { useEffect , useState , forwardRef , useCallback } from 'react';
import { Button , Modal , Form , Input } from 'antd';
import { AlignCenter } from '../Component/layout';
import axios from 'axios';
import Modals from '../Component/Modal';
import PasswordAuthority from '../Component/PasswordAuthority';
import Nodata from "../Nodata";

function BlockchainTransfer(props){

  const [ status , setStatus ] = useState(0);
  const [ total , setTotal ] = useState(0);
  const [ list , setList ] = useState([]);
  const [ authorityValBox , setAuthorityValBox] = useState(false);

  const { form: { getFieldDecorator, validateFields , setFieldsValue } } = props;
  const helper = useCallback(
    (label, name, rules, widget, isRequired) => (
      <React.Fragment>
        <span className={isRequired ? "required" : ""}>{label}</span>
        <Form.Item>
          {getFieldDecorator(name, { rules, validateFirst: true })(widget)}
        </Form.Item>
      </React.Fragment>
    ),
    []
  );

  let user = props.current_user;

  useEffect(()=>{
    if(user && user.login){
      getInfo();
    }
  },[])

  // read all the projects that the user has more than 0 tokens
  function getInfo(){
    const url = `/users/blockchain/balance`;
    axios.get(url,{
      params:{
        "user_id": user.user_id
      }
    }).then(result=>{
      if(result && result.data){
        setStatus(result.data.status);
        if(status == 0) {
          setList(result.data.projects);
          setTotal(result.data.total_count);
        }
      }
    }).catch(error=>{
      console.log(error);
    })
  }

  function okAuthority(){
    setAuthorityValBox(false);
  }

  function cancelAuthority(){
    setAuthorityValBox(false);
  }


  function submit(owner, project, balance, id) {
    const url = '/users/blockchain/transfer';
    axios.post(url, {
      payer_id: user.user_id,
      project_id: project.id,
      transfer_amount: document.getElementById("amount_" + id).value,
      transfer_login: document.getElementById("login_" + id).value
    }).then((result) => {
      if (result && result.data) {
        if (result.data.status == 2) {
          window.location.reload();
        }
      }
    })
  }


  return(
    <div style={{minHeight:"400px"}}>
      <PasswordAuthority authorityValBox={authorityValBox} successFunc={okAuthority} cancelFunc={cancelAuthority}></PasswordAuthority>
      {
        status == 0 && list && list.length > 0 ?
          <ul className="BalanceList">
            <li>
              <span className="blockchain_proj green ml20">项目创建者/项目名</span>
              <span className="blockchain_balance green ml20">token总量</span>
              <span className="blockchain_input_to ml20">目标转账用户</span>
              <span className="blockchain_input_num ml20">转账token数量</span>
              <Button hidden={true}></Button>
            </li>
            {list.map((item,index)=>{
              return(
                <li key={index}>
                  <Form>
                    <span className="blockchain_proj green ml20">{item[0].login + "/" + item[1].name}</span>
                    <span className="blockchain_balance green ml20">{item[2]}</span>
                    <span className="blockchain_input_to ml20"><Input type="text" placeholder={"请输入转给哪个用户(login)"} name={"transfer_login"} id={"login_"+index} /></span>
                    <span className="blockchain_input_num ml20"><Input type="text" placeholder={"请输入转账token数量"} name={"transfer_amount"} id={"amount_"+index} /></span>
                    <Button className="primary ml20" onClick={() => {submit(item[0], item[1], item[2], index)}}>确认</Button>
                  </Form>
                </li>
              )
            })}
          </ul>
          :<Nodata _html="暂无数据"/>
      }
    </div>
  )
}
export default Form.create()(forwardRef(BlockchainTransfer));;
