import { useState } from 'react'
import "../css/New.css"
import eth from "../eth/eth.js"
import {ethers} from "ethers";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"




function New() {

  const [beneficiary, setbeneficiary] = useState("");
  const [withdrawDate, setwithdrawDate] = useState("");
  const [amount, setamount] = useState("");
  const [startDate, setstartDate] = useState(new Date());

  async function submit(){
    console.log(eth.contractWithSigner);
    //var contractSigner = eth.contract.connect(eth.signer);
    var response = await eth.contractWithSigner.deposit(beneficiary, withdrawDate, {value: ethers.utils.parseUnits(amount)});
    console.log(response);
  }
  //console.log(new Date());
  console.log(Date.toString(new Date()))

  function handleAddress(e){
    setbeneficiary(e.target.value);
  }

  function handleWithdrawDate(e){
    setwithdrawDate(e.target.value);
  }

  function handlenewDate(date){
    setstartDate(date);
    var unixTimestamp = Math.floor(date / 1000);
    setwithdrawDate(unixTimestamp);
  }

  function handleAmount(e){
    setamount(e.target.value);
  }


  return (
    <div className="New">
      <div className="NewContainer">
        <h1>New Will</h1>
            <table className="Table">
              <tbody>
              <tr>
              <td>Beneficiary</td>
              <td><input type="text" onChange={handleAddress}/></td>
              </tr>
              <tr>
              <td>Withdraw Date</td>
              <td>
                <DatePicker
                  selected={startDate}
                  showYearDropdown
                  dropdownMode='select'
                  showTimeSelect
                  timeFormat='HH:mm'
                  timeIntervals={15}
                  minDate={new Date()}
                  popperPlacement="right"
                  dateFormat= "MMMM d, yyyy HH:mm"
                  onChange={(date) => handlenewDate(date)}
                />
              </td>
              </tr>
              <tr>
              <td>Amount</td>
              <td><input type="text" onChange={handleAmount}/></td>
              </tr>
              </tbody>
            </table>
        <button className ="Button" onClick={submit}>Create</button>
      </div>
    </div>
  )
}

export default New
