metis-desk/modules/companies/src/web/mailboxes/shared/ui/mailbox-relations.tsx

import { Button } from "@repo/shadcn-ui/components/button";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import type { CompanyDTO } from "../../../../common";
import { MailFeedback } from "../../../mail-configurations/shared/ui/mail-feedback";
import { MailboxUseEditorDialog } from "../../../mailbox-uses";
import { mailboxApi, mailboxKeys } from "../api";
export function MailboxRelations({
  company,
  csrfToken,
  mailboxId,
}: {
  company: CompanyDTO;
  csrfToken: string;
  mailboxId: string;
}) {
  const { t } = useTranslation("companies");
  const [editor, setEditor] = useState<string>();
  const query = useQuery({
    queryKey: mailboxKeys.company(company.id),
    queryFn: () => mailboxApi.request(company.id),
  });
  const uses = query.data?.uses.filter((item) => item.values.mailboxId === mailboxId) ?? [];
  const edited = uses.find((item) => item.id === editor);
  return (
    <section className="space-y-3 border-t pt-4">
      <div className="flex items-center justify-between gap-3">
        <h3 className="font-medium">{t("people")}</h3>
        <Button onClick={() => setEditor("new")} size="sm" variant="outline">
          {t("mailbox.linkPerson")}
        </Button>
      </div>
      <MailFeedback error={query.error} />
      <ul className="space-y-2">
        {uses.map((item) => (
          <li className="flex items-center justify-between gap-3 text-sm" key={item.id}>
            <span>
              {company.people.find((person) => person.id === item.values.personId)?.name ??
                t("people")}{" "}
              · {item.values.startDate} → {item.values.endDate ?? t("mailbox.openPeriod")}
            </span>
            {!item.values.endDate && (
              <Button onClick={() => setEditor(item.id)} size="sm" variant="outline">
                {t("mailbox.closeUse")}
              </Button>
            )}
          </li>
        ))}
      </ul>
      {editor && (
        <MailboxUseEditorDialog
          company={company}
          csrfToken={csrfToken}
          mailboxId={mailboxId}
          onOpenChange={(open) => {
            if (!open) {
              setEditor(undefined);
            }
          }}
          onSaved={() => setEditor(undefined)}
          use={edited}
        />
      )}
    </section>
  );
}