import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { useTranslation } from "react-i18next";

import type { WorkstationDTO } from "../common";

export function WorkstationHistoryDialog({
  workstation,
  personName,
  siteName,
  members,
  onClose,
}: {
  workstation: WorkstationDTO;
  personName: (id: string | null) => string;
  siteName: (id: string | null) => string;
  members: (ids: readonly string[], empty?: string) => string;
  onClose: () => void;
}) {
  const { t, i18n } = useTranslation("assets");

  return (
    <FormDialog
      cancelLabel={t("close")}
      onOpenChange={(open) => {
        if (!open) {
          onClose();
        }
      }}
      open
      title={t("workstationHistory")}
      wide
    >
      <ol className="space-y-4">
        {[...workstation.history].reverse().map((revision) => (
          <li className="space-y-2 rounded-md border p-3 text-sm" key={revision.id}>
            <p className="font-medium">
              {new Intl.DateTimeFormat(i18n.language, {
                dateStyle: "medium",
                timeStyle: "short",
              }).format(new Date(revision.recordedAt))}{" "}
              · {t("recordedBy", { name: revision.actorName })}
            </p>
            <p>
              {revision.values.name} · {t(revision.values.active ? "active" : "inactive")}
            </p>
            <p>
              {siteName(revision.values.siteId)} · {personName(revision.values.personId)}
            </p>
            <p>
              {t("exclusiveWorkstationAssets")}: {members(revision.values.assetIds)}
            </p>
            <p>
              {t("sharedWorkstationAssets")}:{" "}
              {members(revision.values.sharedAssetIds, "noSharedWorkstationAssets")}
            </p>
          </li>
        ))}
      </ol>
    </FormDialog>
  );
}