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

import type { CompanyDTO } from "../../common";
import type { RemoteConnectionDTO } from "../../common/remote-connections";

import { remoteEndpoints } from "./remote-summary";

export function RemoteConnectionHistoryDialog({
  connection,
  company,
  inventory,
  entries,
  person,
  onClose,
}: {
  connection: RemoteConnectionDTO;
  company: CompanyDTO;
  inventory: Parameters<typeof remoteEndpoints>[2];
  entries: Parameters<typeof remoteEndpoints>[3];
  person: (id: string) => string;
  onClose: () => void;
}) {
  const { t, i18n } = useTranslation("companies");

  return (
    <FormDialog
      cancelLabel={t("close")}
      onOpenChange={(open) => {
        if (!open) {
          onClose();
        }
      }}
      open
      title={t("remote.history")}
      wide
    >
      <p className="font-medium">{person(connection.values.personId)}</p>
      <ol className="space-y-3">
        {[...connection.history].reverse().map((r) => {
          const route = remoteEndpoints(r.values, company, inventory, entries, t);
          return (
            <li className="rounded-md border p-3 text-sm" key={r.id}>
              <p className="font-medium">
                {new Intl.DateTimeFormat(i18n.language, {
                  dateStyle: "medium",
                  timeStyle: "short",
                }).format(new Date(r.recordedAt))}{" "}
                · {r.actorName}
              </p>
              <p>
                {route.source} → {r.values.method} → {route.target}
              </p>
              <p>{t(`mail.${r.values.state}`)}</p>
              {r.values.requiresVpn && <p>{t("remote.vpnRequired")}</p>}
              {r.values.notes && <p className="mt-2 whitespace-pre-wrap">{r.values.notes}</p>}
            </li>
          );
        })}
      </ol>
    </FormDialog>
  );
}