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

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

import { MailFeedback } from "./mail-feedback";
import { mailboxApi, mailboxKeys } from "./mailbox-api";
import { MailboxUseForm } from "./mailbox-use-form";
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 && (
        <FormDialog
          cancelLabel={t("cancel")}
          formActions
          onOpenChange={(open) => {
            if (!open) {
              setEditor(undefined);
            }
          }}
          open
          title={t(edited ? "mailbox.closeUse" : "mailbox.linkPerson")}
        >
          <MailboxUseForm
            allowQuickCreate={false}
            company={company}
            csrfToken={csrfToken}
            initialMailboxId={mailboxId}
            onSaved={() => setEditor(undefined)}
            use={edited}
          />
        </FormDialog>
      )}
    </section>
  );
}