/**
 * @author Martin Karkowski
 * @email m.karkowski@zema.de
 * @create date 2020-12-03 09:34:08
 * @modify date 2020-12-03 09:34:08
 * @desc [description]
 */

import { faHashtag } from "@fortawesome/free-solid-svg-icons";
import { GetStaticProps } from "next";
import Head from "next/head";
import { join } from "path";
import { Button, Container, Jumbotron, Table } from "react-bootstrap";
import { FOLDER_SPLIT, listFiles } from "../lib/helpers/fileMethods";
import { replaceAll } from "../lib/helpers/stringMethods";
import Toolbar from "../resources/ui/layout/toolbar";

interface IFile {
  name: string;
  path: string;
}
export const getStaticProps: GetStaticProps = async () => {
  const data: IFile[] = [];

  const files: IFile[] = (await listFiles(join(process.cwd(), "pages"), ".tsx"))
    .map((file) => {
      console.log(file);
      let path = file.split(FOLDER_SPLIT + "pages" + FOLDER_SPLIT)[1];
      path = path.slice(0, path.length - 4);
      path = "/" + replaceAll(path, FOLDER_SPLIT, "/");

      const name = path.split("/")[path.split("/").length - 1];

      return {
        name,
        path
      };
    })
    .filter(
      // Filter the Files, based on their Name.
      // Elements starting with _ wont be used.
      (file) => !file.name.startsWith("_") && file.name !== "index"
    );

  return {
    props: {
      data: files
    }
  };
};

export default function Home(props: { data: IFile[] }) {
  let idx = 0;
  return (
    <>
      <Head>
        <title>Nope Backend - Home</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Container>
        <Toolbar<undefined>
          toolbar={{
            items: [
              {
                type: "link",
                ref: "/docs",
                label: "docs",
                icon: faHashtag
              }
            ]
          }}
          generateData={() => undefined}
          brand={{
            icon: "/nope/logo_light.png",
            label: "",
            ref: "/",
            type: "link"
          }}
        ></Toolbar>
        <Jumbotron>
          <h1>Hello</h1>
          <p>
            Congratulations, your are running the nopeBackend! The Following
            Items have been found:
          </p>
        </Jumbotron>
        <Table striped bordered hover>
          <thead>
            <tr>
              <th>Name</th>
              <th>Path</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {props.data.map((file) => {
              return (
                <tr key={idx++}>
                  <td>{file.name}</td>
                  <td>
                    <code>{file.path}</code>
                  </td>
                  <td>
                    <Button
                      variant="light"
                      href={file.path}
                      style={{ width: "100%" }}
                    >
                      Open
                    </Button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </Table>
      </Container>
    </>
  );
}
