import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

interface AddressesProps {
    addressList: string[];
    setAddressListFn: any;
}

function Addresses(props: AddressesProps) {
    const [inputState, setInputState] = useState("");
    const { setAddressListFn, addressList } = props;

    const save = () => {
        console.log(inputState);
        //TODO check if correct address format
        if (addressList.includes(inputState)) {
            //Do nothing
        } else {
            setAddressListFn([...addressList, inputState]);
        }
        setInputState("");
    }
    return (
            <div>
            <input id="address" value={inputState} onChange={ (evt) => setInputState(evt.target.value) } ></input>
            <button onClick={save}>Add address</button>
            </div>
           );
}

interface AddressListProps {
    addressList: string[];
};

function AddressList({addressList}: AddressListProps) {

    const addresses = addressList.length == 0 ?
    <p>No addresses specified yet</p> :
    addressList.map((addr: string) => <div key={addr} className="addressItem">{addr}</div>);
    return (
        <div>
            <h2>Addresses to airdrop to: </h2>
            { addresses }
        </div>
    )
}

function App() {
    const [addressList, setAddressList] = useState([]);

  return (
    <div className="App">

        <h1>Airdrop App</h1>

      <p>Add an address to airdrop to:</p>
      <Addresses addressList={addressList} setAddressListFn={setAddressList}/>
      <button disabled={addressList.length == 0}>Perform Airdrop!</button>
      <AddressList addressList={addressList} />

    </div>
  );
}

export default App;