function Main() {
  const totalCoins = Number(17042.67);
  const [coins, setCoins] = useState("");
  const [error, setError] = useState("");

  const handleOnChange = (e) => {
    if (e.target.value === "" ) {
      setError("Amount cannot be empty");
    } else if (e.target.value <= 0.01) {
      setError("Amount cannot be less than $0.01");
    } else if (e.target.value > totalCoins) {
      setError("Amount cannot exceed the available balance");
    }
    setCoins(e.target.value);
  };

  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" value={coins} onChange={handleOnChange}/> of my $
            <span>{totalCoins}</span>:
          </label>
          {error && <p data-testid="error" className="form-hint error-text mt-3 pl-0 ml-0">
            {error}
          </p>}
          {/* The errors can be Amount cannot be empty /be less than $0.01/exceed the available balance */}
        </div>
      </section>
      <Table coins={coins} hasError={error}/>
    </div>
  );
}

function Table({ coins, hasError }) {
  return (
    <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((currency) => {
            return (
              <tr key={currency.code}>
                <td>{currency.name}</td>
                <td>1 USD = {coins === "" ? Number(0.00000000).toFixed(8) : `${currency.rate} ${currency.code}`} </td>
                <td>{hasError ? "n/a" : coins === "" ?
                 '0.00000000' : Number((coins * currency.rate).toFixed(8))}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  );
}

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;