import {
  Tab,
  TabList,
  makeStyles,
  typographyStyles,
} from "@fluentui/react-components";
import {
  AppsListDetailFilled,
  AppsListDetailRegular,
  DesktopFilled,
  DesktopRegular,
  InfoFilled,
  InfoRegular,
  bundleIcon,
} from "@fluentui/react-icons";
import React from "react";
import { Rights, ServerApi } from "./api/ServerApi";
import { AuthRouteWidget } from "./routes/AuthRouteWidget";
import { AsyncWidget } from "./widgets/AsyncWidget";
import { MainMenu } from "./widgets/MainMenu";
import { SystemInfoWidget } from "./widgets/SystemInfoWidget";
import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget";
import { GroupsWidget } from "./widgets/GroupsWidget";

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

const InfoIcon = bundleIcon(InfoFilled, InfoRegular);

const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular);

const AppListIcon = bundleIcon(AppsListDetailFilled, AppsListDetailRegular);

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 {
  if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
    return <AuthRouteWidget />;

  return <AuthenticatedApp />;
}

function AuthenticatedApp(): React.ReactElement {
  const styles = useStyles();
  const [tab, setTab] = React.useState<"group" | "vm" | "info">("group");

  const [rights, setRights] = React.useState<Rights | undefined>();

  const load = async () => {
    const rights = await ServerApi.GetRights();
    setRights(rights);

    if (rights!.groups.length > 0) setTab("group");
    else if (rights!.vms.length > 0) setTab("vm");
    else setTab("info");
  };

  return (
    <AsyncWidget
      loadKey={1}
      load={load}
      errMsg="Failed to retrieve application rights!"
      build={() => {
        return (
          <div
            style={{
              width: "95%",
              maxWidth: "1000px",
              margin: "50px auto",
            }}
          >
            <span className={styles.title}>VirtWebRemote</span>
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                marginTop: "30px",
              }}
            >
              <TabList
                selectedValue={tab}
                onTabSelect={(_, d) => setTab(d.value as any)}
              >
                {rights!.groups.length > 0 && (
                  <Tab value="group" icon={<AppListIcon />}>
                    Groups
                  </Tab>
                )}
                {rights!.vms.length > 0 && (
                  <Tab value="vm" icon={<DesktopIcon />}>
                    Virtual machines
                  </Tab>
                )}
                {rights!.sys_info && (
                  <Tab value="info" icon={<InfoIcon />}>
                    System info
                  </Tab>
                )}
              </TabList>
              <div>
                <MainMenu />
              </div>
            </div>
            {tab === "group" && <GroupsWidget rights={rights!} />}
            {tab === "vm" && <VirtualMachinesWidget rights={rights!} />}
            {tab === "info" && <SystemInfoWidget />}
          </div>
        );
      }}
    />
  );
}