import React, { useState, useEffect } from 'react';
import './App.css';

import Path from './Path';
import Log from './Log';
import Options from './Options';
import Info from './Info';
import Setup from './Setup';

function App() {
  const [setupStatus, setSetupStatus] = useState(null);

  useEffect(() => {
    const checkStatus = async () => {
      try {
        const resp = await fetch('http://localhost:8000/api/setup/status');
        const rootResp = await fetch('http://localhost:8000/');
        if (resp.ok && rootResp.ok) {
          const data = await resp.json();
          const rootData = await rootResp.json();
          data.backend_ready = rootData.ready;
          setSetupStatus(data);
          if (!rootData.ready) {
            setTimeout(checkStatus, 2000);
          }
        } else {
          setTimeout(checkStatus, 2000);
        }
      } catch (e) {
        console.error("Could not reach backend API, retrying in 2s...");
        setTimeout(checkStatus, 2000);
      }
    };
    checkStatus();
  }, []);

  if (!setupStatus) {
    return <div className="loading">Initializing Backend Connection...</div>;
  }

  if (!setupStatus.data_ready || !setupStatus.auth_ready || !setupStatus.backend_ready) {
    return <Setup status={setupStatus} onComplete={() => window.location.reload()} />;
  }

  return (
    <div className="App flex flex-wrap h-screen">
      <div className="w-2/3 h-full overflow-auto hide-scrollbar">
        <Path />
      </div>
      <div className="w-1/3 h-full flex flex-col">
        <div className="h-1/4 overflow-auto">
          <Info />
        </div>
        <div className="h-1/4 overflow-auto">
          <Options />
        </div>
        <div className="flex-1 overflow-auto">
          <Log/>
        </div>
      </div>
    </div>
  );
}

export default App;