import React from "react";
import { cryptocurrencyList } from "../cryptocurrency-list";

const bal = 17042.67

function roundTo8Decimals(num) {
  return Number(num.toFixed(8));
}

function isNumber(value) {
  return typeof value === 'number';
}

function Main() {
  const [val, setVal] = React.useState()
  const [error, setError] = React.useState()
  const isFirstRenderRef = React.useRef(true);

  React.useEffect(() => {
    if (isFirstRenderRef.current) {
      isFirstRenderRef.current = false;
      return
    }

    if (val === '') { 
      setError('Amount cannot be empty'); 
    } else if (val < 0.01) { 
      setError('Amount cannot be less than $0.01'); 
    } else if (val > 17042.67) {
      setError('Amount cannot exceed the available balance');
    } else {
      setError(); 
    }
  }, [val])

  return (
    <div className="layout-column align-items-center mx-auto">
      <h1>CryptoRank Exchange</h1>
      <section>
        <div className="card-text layout-column align-items-center mt-12 px-8 flex text-center">
          <label>
            I want to exchange $ <input className="w-10" data-testid="amount-input" required type="number" placeholder="USD" onChange={(e) => setVal(e.target.value)} value={val} /> of my $
            <span>{bal}</span>:
          </label>

          {error && <p data-testid="error" className="form-hint error-text mt-3 pl-0 ml-0">
            {error}
          </p>}
        </div>
      </section>

      <div className="card card-text mt-10 mx-4">
        <table className="mb-0">
          <thead>
            <tr>
              <th>Cryptocurrency</th>
              <th>Exchange Rate</th>
              <th>Number of Coins</th>
            </tr>
          </thead>
          <tbody data-testid="exchange-data">
            {cryptocurrencyList.map((crypto, idx) => {
              return (<tr key={idx}>
                <td>{crypto.name}</td>
                <td>1 USD = {crypto.rate} {crypto.code}</td>
                <td>
                  {val && !error && roundTo8Decimals(val * crypto.rate)}
                  {!val && !error && '0.00000000'}
                  {error && 'n/a'}
                </td>
              </tr>
              )
            })}
          </tbody>
        </table>
      </div>

    </div>
  );
}

export default Main;