import React, { useEffect, useState } from 'react'
import { formatEther } from '@ethersproject/units'
import { BigNumber } from 'ethers'
import { ContentBlock } from '../base/base'
import { TextBold } from '../../typography/Text'
import { Colors, BorderRad, Transitions } from '../../global/styles'
import styled from 'styled-components'
import { useEtherBalance, useEthers } from '@usedapp/core'
import { Button } from '../base/Button'
import { useSendTransaction } from '@usedapp/core'
import { utils } from 'ethers'
import { StatusAnimation } from '../Transactions/TransactionForm'

const formatter = new Intl.NumberFormat('en-us', {
  minimumFractionDigits: 4,
  maximumFractionDigits: 4,
})

const formatBalance = (balance: BigNumber | undefined) =>
  formatter.format(parseFloat(formatEther(balance ?? BigNumber.from('0'))))

const InputComponent = () => {
  const { account } = useEthers()

  const [amount, setAmount] = useState('0')
  const [address, setAddress] = useState('')
  const [disabled, setDisabled] = useState(false)

  const { sendTransaction, state } = useSendTransaction({ transactionName: 'Send Ethereum' })

  const handleClick = () => {
    setDisabled(true)
    void sendTransaction({ to: address, value: utils.parseEther(amount) })
  }

  useEffect(() => {
    if (state.status != 'Mining') {
      setDisabled(false)
      setAmount('0')
      setAddress('')
    }
  }, [state])

  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <InputRow>
        <Input
          id={`EthInput`}
          type="number"
          step="0.01"
          value={amount}
          onChange={(e) => setAmount(e.currentTarget.value)}
          min="0"
          disabled={disabled}
        />
        <FormTicker>ETH to:</FormTicker>
        <AddressInput
          id={`AddressInput`}
          type="text"
          value={address}
          onChange={(e) => setAddress(e.currentTarget.value)}
          disabled={disabled}
        />
        <SmallButton disabled={!account || disabled} onClick={handleClick}>
          Send
        </SmallButton>
      </InputRow>
      <StatusAnimation transaction={state} />
    </div>
  )
}

export const SendEthForm = () => {
  const { account } = useEthers()
  const balance = useEtherBalance(account)
  return (
    <ContentBlock style={{ padding: 0 }}>
      <TitleRow>
        <CellTitle>Send transaction</CellTitle>
        <BalanceWrapper>Your ETH balance: {formatBalance(balance)}</BalanceWrapper>
      </TitleRow>
      <LabelRow>
        <Label style={{ marginLeft: '58px' }} htmlFor={'EthInput'}>
          How much?
        </Label>
        <Label style={{ marginLeft: '240px' }} htmlFor={'AddressInput'}>
          To whom?
        </Label>
      </LabelRow>
      <InputComponent />
    </ContentBlock>
  )
}

const CellTitle = styled(TextBold)`
  font-size: 18px;
`

const LabelRow = styled.div`
  display: flex;
  margin: 32px 0 24px 0;
`

const Label = styled.label`
  font-weight: 700;
  cursor: pointer;
  transition: ${Transitions.all};

  &:hover,
  &:focus-within {
    color: ${Colors.Yellow[500]};
  }
`

const TitleRow = styled.div`
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: ${Colors.Gray['300']} 1px solid;
  padding: 16px;
`

const BalanceWrapper = styled.div`
  color: ${Colors.Gray['600']};
  font-size: 14px;
`

const Input = styled.input`
  height: 100%;
  width: 120px;
  padding: 0 0 0 24px;
  border: 0;
  border-radius: ${BorderRad.m};
  -moz-appearance: textfield;
  outline: none;

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  &:-webkit-autofill,
  &:-webkit-autofill:hover,
  &:-webkit-autofill:focus,
  &:-webkit-autofill:active {
    -webkit-background-clip: text;
  }
`

const AddressInput = styled(Input)`
  width: 401px;
  padding: 0 0 0 38px;
`

const InputRow = styled.div`
  height: 44px;
  display: flex;
  margin: 0 auto;
  color: ${Colors.Gray['600']};
  align-items: center;
  border: ${Colors.Gray['300']} 1px solid;
  border-radius: ${BorderRad.m};
  overflow: hidden;
  transition: ${Transitions.all};

  &:hover,
  &:focus-within {
    border-color: ${Colors.Black[900]};
  }
`

const FormTicker = styled.div`
  padding: 0 8px;
`

const SmallButton = styled(Button)`
  display: flex;
  justify-content: center;
  min-width: 95px;
  height: 100%;
  padding: 8px 24px;

  &:disabled {
    color: ${Colors.Gray['600']};
    cursor: unset;
  }

  &:disabled:hover,
  &:disabled:focus {
    background-color: unset;
    color: unset;
  }
`