import React, { useState } from 'react'
import { useQuery, useMutation } from '@apollo/react-hooks'
import { ethers } from 'ethers'
import gql from 'graphql-tag'

import { Button } from 'lib/components/Button'
import { tokenQuery } from 'lib/queries/tokenQuery'
import { transactionsQuery } from 'lib/queries/transactionsQuery'
import { podUserQuery } from 'lib/queries/podUserQuery'
import { podQuery } from 'lib/queries/podQuery'
import { poolQuery } from 'lib/queries/poolQuery'

export default function PodJoinForm({ podAddress, userAddress }) {
  const [
    amount,
    setAmount
  ] = useState('')

  const [
    lastRefetchTxId,
    setLastRefetchTxId
  ] = useState(0)

  const weiAmount = ethers.utils.parseEther(amount || '0')

  let pod = useQuery(podQuery, {
    variables: { podAddress }
  })

  let poolAddress = pod.data ? pod.data.poolAddress : null

  let podUser = useQuery(podUserQuery, {
    variables: { podAddress, userAddress },
    skip: !userAddress || !podAddress
  })

  let pool = useQuery(poolQuery, {
    variables: {
      podAddress,
      poolAddress
    },
    skip: !poolAddress
  })

  let tokenAddress = pool.data ? pool.data.tokenAddress : null

  // console.log({ podAddress, userAddress, poolAddress, tokenAddress })

  let token = useQuery(tokenQuery, {
    variables: {
      podAddress,
      userAddress,
      tokenAddress
    },
    skip: !tokenAddress || !userAddress
  })

  let transactions = useQuery(transactionsQuery)

  let loading = podUser.loading || pool.loading || token.loading || transactions.loading
  let error = podUser.error || pool.error || token.error || transactions.error

  const [approve, approveResult] = useMutation(gql`
    mutation approveMutation($tokenAddress: String!, $podAddress: String!, $amount: Float!) {
      sendTransaction(abi: "ERC20", address: $tokenAddress, fn: "approve", params: [$podAddress, $amount]) @client
    }
  `, {
    variables: {
      tokenAddress,
      podAddress,
      amount: weiAmount
    },
    refetchQueries: ['transactionsQuery']
  })

  let approveTx
  if (!loading && !error && approveResult.data) {
    approveTx = transactions.data._transactions.find(tx => tx.id === approveResult.data.sendTransaction.id)  
  }

  const [deposit, depositResult] = useMutation(gql`
    mutation depositMutation($podAddress: String!, $amount: Float!) {
      sendTransaction(abi: "Pod", address: $podAddress, fn: "deposit", params: [$amount, "0x0"], gasLimit: 1000000) @client
    }
  `, {
    variables: {
      podAddress,
      amount: weiAmount
    },
    refetchQueries: ['transactionsQuery']
  })

  let depositTx
  if (!loading && !error && depositResult.data) {
    depositTx = transactions.data._transactions.find(tx => tx.id === depositResult.data.sendTransaction.id)
  }

  if (approveTx && approveTx.completed && approveTx.id > lastRefetchTxId) {
    token.refetch()
    setLastRefetchTxId(approveTx.id)
  }

  if (depositTx && depositTx.completed && depositTx.id > lastRefetchTxId) {
    setAmount(0)
    token.refetch()
    podUser.refetch()
    pool.refetch()
    setLastRefetchTxId(depositTx.id)
  }

  let needsApproval = true
  // let sufficientBalance = false

  if (!loading && !error && token.data) {
    needsApproval = token.data.allowance.lt(ethers.utils.bigNumberify(weiAmount))
    // sufficientBalance = token.data.balance.gte(ethers.utils.bigNumberify(weiAmount))
  }

  return (
    <form className="w-full max-w-sm mt-5" onSubmit={(e) => { e.preventDefault(); needsApproval ? approve() : deposit() } }>
      <div className="md:flex md:items-center mb-3">
        <div className="md:w-1/3">
          <label className="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" htmlFor="inline-full-name">
            Deposit
          </label>
        </div>
        <div className="md:w-2/3">
          <input
            className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
            id="inline-full-name"
            type="text"
            placeholder="enter Dai amount"
            value={amount}
            onChange={(e) => { e.preventDefault(); setAmount(e.target.value) } }
            />
        </div>
      </div>
      <div className="md:flex md:items-center">
        <div className="md:w-1/3"></div>
        <div className="md:w-2/3">
          <Button
            disabled={!needsApproval}
            onClick={(e) => { e.preventDefault(); approve(); } }>
            Approve
          </Button>
          &nbsp;
          <Button
            disabled={needsApproval}
            onClick={(e) => { e.preventDefault(); deposit(); } }>
            Deposit
          </Button>
        </div>
      </div>
    </form>
  )
}