import { makeStyles, typographyStyles } from "@fluentui/react-components";
import { ServerApi } from "./api/ServerApi";
import { AuthRouteWidget } from "./routes/AuthRouteWidget";
import { AsyncWidget } from "./widgets/AsyncWidget";
import { MainMenu } from "./widgets/MainMenu";
import { SystemInfoWidget } from "./widgets/SystemInfoWidget";

const useStyles = makeStyles({
  title: typographyStyles.title2,
});

export function App() {
  return (
    <AsyncWidget
      loadKey={1}
      errMsg="Failed to load server configuration!"
      load={ServerApi.LoadConfig}
      loadingMessage="Loading server configuration..."
      build={() => <AppInner />}
    />
  );
}

function AppInner(): React.ReactElement {
  const styles = useStyles();

  if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
    return <AuthRouteWidget />;

  return (
    <div
      style={{
        width: "95%",
        maxWidth: "1000px",
        margin: "50px auto",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <span className={styles.title}>VirtWebRemote</span>
        <MainMenu />
      </div>
      <SystemInfoWidget />
    </div>
  );
}