import Caprover, { Application } from "../services/Caprover";
import Layout, { html } from "../ui/Layout";

const OLD_PERIOD_IN_DAYS = 60;

const ApplicationOverview = (application: Application) => {
  const deployedAt = application.lastDeployedAt.toLocaleDateString("fr-FR");
  return html`<tr>
    <td>${application.name}</td>
    <td>
      <details>
        <summary>
          <code>${application.imageName}</code>
        </summary>
        <pre style="user-select: all;">${application.toString()}</pre>
      </details>
    </td>
    <td>
      ${application.isOlderThan(OLD_PERIOD_IN_DAYS)
        ? `<mark>${deployedAt}</mark>`
        : deployedAt}
    </td>
    <td>
      ${application.dockerImage
        ? `<a href="${application.dockerImage.hubUrl}/tags">
          <img height="32" width="32" src="https://cdn.simpleicons.org/docker" alt="Docker hub"/>
        </a>`
        : ""}
    </td>
  </tr> `;
};

type Sort = { field: string; order: "asc" | "desc" };

const Page = (applications: Application[], currentSort: Sort) => {
  const sortLink = (field: string, title: string) => {
    let url = `?sort=${field}`;
    let className = "";
    if (currentSort.field === field) {
      className = "current";
      title += currentSort.order === "asc" ? " ▲" : " ▼";
      url += `&order=${currentSort.order === "asc" ? "desc" : "asc"}`;
    }

    return `<a href="${url}" class="${className}">${title}</a>`;
  };

  return html`<div>
    <h1>Applications</h1>

    <a href="/applications/update" class="button">Update applications now!</a>

    <table>
      <thead>
        <tr>
          <th>${sortLink("name", "Name")}</th>
          <th>Deployment</th>
          <th>${sortLink("deployed", "Last deployed")}</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        ${applications.map((app) => ApplicationOverview(app)).join("")}
      </tbody>
    </table>
  </div>`;
};

export default async (req: Request, caprover: Caprover): Promise<Response> => {
  const applications = await caprover.getApps();

  const sort: Sort = {
    field: new URL(req.url).searchParams.get("sort") ?? "name",
    order:
      new URL(req.url).searchParams.get("order") === "desc" ? "desc" : "asc",
  };
  if (sort.field === "name") {
    applications.sort((a, b) => a.name.localeCompare(b.name));
  } else if (sort.field === "deployed") {
    applications.sort(
      (a, b) => a.lastDeployedAt.getTime() - b.lastDeployedAt.getTime()
    );
  }
  if (sort.order === "desc") {
    applications.reverse();
  }

  return new Response(Layout(Page(applications, sort)), {
    headers: { "Content-Type": "text/html" },
  });
};