const { useState, useEffect } = React;
/*
* https://frontendeval.com/questions/crypto-converter
*
* Create a Cryptocurrency converter
*/


const App = () => {
  const [showDropDown, setShowDropDown] = useState(false);
  const currencies = ['usd', 'eur', 'gbp', 'cny', 'jpy'];
  const [currency, setCurrency] = useState(currencies[0]);
  const [prevVal, setPrevVal] = useState(null);
  const [currValue, setCurrValue] = useState(null);
  const [inputAmount, setInputAmount] = useState(0);
  
  const [colour, setColour] = useState('green');
  
  const getValue = async (curr) => {
    try {
      let link = 'https://api.frontendeval.com/fake/crypto/' + curr;
      const response = await fetch('https://api.frontendeval.com/fake/crypto/' + curr);
      const data = await response.json();
      return data.value;
    } catch (err) {
      console.error('API Error:',  err);
    }
  }
  
  useEffect(() => {
    const fetchData = async () => {
      const val = await getValue(currency);
      setCurrValue(val);
    }
    fetchData();
    
    const interval = setInterval(async () => {
      const val = await getValue(currency);
      
      setCurrValue(oldVal => {
        setPrevVal(oldVal);
        return val;
      });

      setColour(currValue >= val ? 'green' : 'red');
    }, 10000);
    return () => clearInterval(interval);
  }, [currency])
  
  
  const handleOnClick = async (currency) => {
    setCurrency(currency);
    setPrevVal(null);
    const val = await getValue(currency);
    setCurrValue(val);
    setShowDropDown(false);
  }
    
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '30px' }}>
      <div style={{ display: 'flex', gap: '10px', marginBottom: '10px', position: 'relative' }}>
      
      <input
        value = {inputAmount}
        onChange = {(e) => {
          setInputAmount(e.target.value);
        }}
        placeholder = "Please input a value"
        type = "number"
        />
        <select value={currency} 
          onChange={(e) => handleOnClick(e.target.value)}>
          {currencies.map((curr) => (
            <option value={curr}> {curr.toUpperCase()}
          </option>) )}
          </select>
      </div>
      <div>
        <div style = {{display: 'flex', alignItems: 'center'}}>
        {
          currValue != null ? (
            <p> {Math.round(inputAmount * currValue * 100)/100} WUC    </p>
          )
          : <></>
        }
        {
         (  currValue != null) ? (
            <div styles = {{color: colour}}> {prevVal <= currValue ?  '↑' : '↓'} {Math.round(inputAmount * prevVal * 100) / 100} </div>
          )
          : <></>
        }
        </div>
      </div>
    </div>);
}



ReactDOM.render(<App />, document.getElementById('app'));