import { Link, Outlet, useNavigate } from "react-router-dom";
import styles from "./Root.module.scss";
import { useQuery } from "react-query";
import { MenuItem } from "@blueprintjs/core";
import { getServices } from "./lib/api";

export default function Root() {
  const navigate = useNavigate();
  const servicesQuery = useQuery("service/list", getServices);

  if (servicesQuery.status !== "success") {
    console.log("SHIET", servicesQuery);
    return <>Loading...</>;
  }

  return (
    <div className={styles.container}>
      <div className={styles.sidebar}>
        <h1 style={{ margin: "6px" }}>
          <Link to="/">aah</Link>
        </h1>
        <small>"no honey, we have aws at home" ~mom</small>

        <hr />

        <p>Services:</p>
        {servicesQuery.data.map((service) => {
          let icon;
          if (service.status === "New") {
            icon = "clean";
          }
          const text = `${service.name} (${service.id})`;
          const goto = () => navigate(`/service/${service.id}`);
          return (
            <MenuItem icon={icon} text={text} key={service.id} onClick={goto} />
          );
        })}
      </div>
      <div className={styles.mainContent}>
        <Outlet />
      </div>
    </div>
  );
}