const URL = `https://api.frontendeval.com/fake/crypto`;

const roundUtils = (nos) => {
  return Math.round(nos * 100) / 100;
};

const initialState = {
  curr: 0,
  prev: 0
};

const reducer = (state, action) => {
  switch (action.type) {
    case "update":
      return {
        curr: action.rate,
        prev: state.curr
      };
  }
};
const useDebouce = (code, value) => {
  // const [convertedValue, setConvertedValue] = React.useState();
  const [state, dispatch] = React.useReducer(reducer, initialState);
  React.useEffect(() => {
    if (!code || !value) return;
    const fetchData = async () => {
      const res = await fetch(`${URL}/${code}`);
      const data = await res.json();
      // setConvertedValue(data.value * value);
      dispatch({
        type: "update",
        rate: data.value * value
      });
    };
    let id;
    let interval;
    id = setTimeout(() => {
      fetchData();
      if (interval) {
        clearInterval(interval);
        interval = null;
      }
      interval = setInterval(() => {
        fetchData();
      }, 5000);
    }, 1000);

    return () => {
      clearTimeout(id);
      clearInterval(interval);
    };
  }, [code, value]);

  return state;
};
const App = () => {
  const [number, setNumber] = React.useState("");
  const [option, setOption] = React.useState("USD");
  const { curr, prev } = useDebouce(option, number);
  const handleChange = (e) => {
    setNumber(e.target.value);
  };

  const handleSelectChange = (e) => {
    setOption(e.target.value);
  };

  console.log(curr, prev);
  const difference = curr - prev;
  return (
    <>
      <div className="container">
        <input
          numericmode="decimal"
          pattern="[0-9]*.?[0-9]*"
          required
          value={number}
          onChange={handleChange}
        />
        <select
          className="crypto-select"
          value={option}
          onChange={handleSelectChange}
        >
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="GBP">GBP</option>
          <option value="CNY">CNY</option>
          <option value="JPY">JPY</option>
        </select>
      </div>
      <div className="row">
        {curr !== 0 && (
          <div className="converted-val">{roundUtils(curr)} WUC</div>
        )}
        {difference !== 0 && (
          <div className={difference > 0 ? "green" : "red"}>{roundUtils(difference)}</div>
        )}
      </div>
    </>
  );
};

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