import React , { useEffect , useState } from 'react';
import axios from 'axios';
import { Select, Input, Button } from 'antd';
const Option = Select.Option;

var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js';
document.head.appendChild(script);

const limit = 10;
function BlockchainExCreate(props){
  const [ status , setStatus ] = useState(0);
  const [ total , setTotal ] = useState(0);
  const [ list , setList ] = useState([]);
  const [ authorityValBox , setAuthorityValBox] = useState(false);
  const [ selectKey , setSelectKey ] =  useState("list");
  const { selectedOption, setSelectedOption } = useState("选择交易的项目");
  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 createTrade(user_id) {
    const url = '/users/blockchain/create_trade';
    axios.post(url, {
      "user_id": user_id,
      "project_id": document.getElementById("input_project").value,
      "money": document.getElementById("money").value,
      "token_num": document.getElementById("token_num").value,
      // "description": document.getElementById("input_description").value
    }).then((result) => {
      if(result && result.data){
        if (result.data.status == 2) {
          window.location.reload();
        }
      }
    })
  }

  function renderProjectList(list) {
    if (list && list.length > 0) {
      return list.map((item, index) => {
        return (
          <Option
            key={index+1}
            value={item[1].id+"/"+item[2]}
          >
            {item[0].login + "/" + item[1].name}
          </Option>
        );
      });
    }
  };

  function selectProjectChange(e) {
    document.getElementById("money").removeAttribute("hidden");
    document.getElementById("token_num").removeAttribute("hidden");
    document.getElementById("submit_btn").removeAttribute("hidden");
    // document.getElementById("input_description").removeAttribute("hidden");

    document.getElementById("token_num").setAttribute("max", e.split('/')[1]);
    document.getElementById("input_project").value=e.split('/')[0];
  }

  function adjustTokenNum() {
    var val = document.getElementById("token_num").value;
    val = parseInt(val);
    var max_val = document.getElementById("token_num").getAttribute("max");
    if (val > max_val) {
      document.getElementById("token_num").value = max_val;
    } else {
      document.getElementById("token_num").value = val;
    }
  }

  return(
    <div style={{minHeight:"400px"}}>
      <span className="blockchain_proj_select ml20">
      <Select
        id = {'select_project'}
        style={{width: "220px"}}
        placeholder={"选择交易的项目"}
        onSelect={(e) => {selectProjectChange(e)}}
      >
        {renderProjectList(list)}
      </Select>
      </span>

      <span>
      <Input
        id={"input_project"}
        hidden={true}
      />
      </span>

      <span>
      <Input
        id={"input_project"}
        hidden={true}
      />
      </span>

      <span className="blockchain_input_num ml20">
      <Input
        type={'number'}
        id={"token_num"}
        placeholder={"输入售卖币数量"}
        hidden={true}
        min={1}
        onInput={() => {adjustTokenNum()}}
      />
      </span>

      <span className="blockchain_input_num ml20">
      <Input
        id={"money"}
        placeholder={"输入售卖金额"}
        hidden={true}
      />
      </span>

      <Button hidden={true} id='submit_btn' className="primary ml20" onClick={() => {createTrade(user.user_id)}}>确认</Button>

    </div>
  )
}
export default BlockchainExCreate;
