import { AnyNode, E } from "ren/node.ts";
import { WorkLink } from "../mod.ts";
import { renderDate } from "../../../render.ts";
import { CHRONOLOGICAL_WORKS } from "../data.ts";
import { RoleList } from "./RoleList.ts";
import { TechnologyList } from "./TechnologyList.ts";

export type ChronologicalWorksTableTranslations = Readonly<
  Record<
    | "Name"
    | "Description"
    | "Role"
    | "Technologies"
    | "Start"
    | "Status_or_End",
    string
  >
>;

const tr = E.bind(null, "tr", []);
const td = E.bind(null, "td", []);
const th = E.bind(null, "th", []);

export const ChronologicalWorksTable = (
  i18n: ChronologicalWorksTableTranslations,
): AnyNode =>
  E("table", [], [
    E("thead", [], [
      tr([
        th(i18n.Name),
        th(i18n.Description),
        th(i18n.Role),
        th(i18n.Technologies),
        th(i18n.Start),
        th(i18n.Status_or_End),
      ]),
    ]),
    E(
      "tbody",
      [],
      CHRONOLOGICAL_WORKS.map((work) =>
        tr([
          td([WorkLink(work)]),
          td(work.description),
          td([RoleList(work.roles)]),
          td([TechnologyList(work.technologies)]),
          td(renderDate(work.startDate)),
          td(
            work.endDate ? renderDate(work.endDate) : work.status,
          ),
        ])
      ),
    ),
  ]);