const root = document.getElementById("root");

// MinutesToHours
function MinutesToHours() {
  const [amount, setAmount] = React.useState(0);
  const [inverted, setInverted] = React.useState(false);
  const onChange = (event) => {
    setAmount(event.target.value);
  };
  const reset = () => setAmount(0);
  const onInverted = () => {
    reset();
    setInverted((current) => !current);
  };
  return (
    <div>
      <div>
        <label htmlFor="minutes">Minutes&nbsp;</label>
        <input
          value={inverted ? amount * 60 : amount}
          id="minutes"
          placeholder="Minutes"
          type="number"
          onChange={onChange}
          disabled={inverted}
         />
       </div>
      
        <div>
          <label htmlFor="hours">hours&nbsp;</label>
          <input
            value={inverted ? amount : amount / 60}
            id="hours"
            placeholder="Hours"
            type="number"
            onChange={onChange}
            disabled={!inverted}
          />
        </div>
        <button onClick={reset}>Reset</button>
        <button onClick={onInverted}>{inverted ? "Turn back" : "Invert"}</button>
    </div>
  );
}

// KmToMiles
function KmToMiles() {
   return <h3>KM 2 M</h3>
}

// App
function App() {
  const [index, setIndex] = React.useState("xx");
  const onSelect = (event) => {
    setIndex(event.target.value);
  }
  
  return (
    <div>
      <h1>🧚‍♀️ Converter 🧚‍♀️</h1>
      <select value={index} onChange={onSelect}>
        <option value="xx">Select your units</option>
        <option value="0">Minutes & Hours</option>
        <option value="1">Km & Miles</option>
      </select>
      <hr />
      {index === "xx" ? "Please select your units" : null}
      {index === "0" ? <MinutesToHours /> : null}
      {index === "1" ? <KmToMiles /> : null}
    </div>
  );
}

ReactDOM.render(<App />, root);