import { FormSectionTitle } from "@repo/rdx-ui/components/form-section-title";
import { Button } from "@repo/shadcn-ui/components/button";
import { useTranslation } from "react-i18next";

import { MailFeedback } from "../../../mail-configurations/shared/ui/mail-feedback";
import { MailboxUseEditorDialog } from "../../../mailbox-uses";
import { useMailboxRelationsController } from "../controllers";
import type { MailboxRelationsProps } from "../types";

export function MailboxRelations(props: MailboxRelationsProps) {
  const { company, mailboxId } = props;
  const { editor, setEditor, query, uses, edited } = useMailboxRelationsController(props);
  const { t } = useTranslation("companies");

  return (
    <section className="space-y-3 border-t pt-4">
      <div className="flex items-center justify-between gap-3">
        <FormSectionTitle>{t("people")}</FormSectionTitle>
        <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}
          mailboxId={mailboxId}
          onOpenChange={(open) => {
            if (!open) {
              setEditor(undefined);
            }
          }}
          onSaved={() => setEditor(undefined)}
          use={edited}
        />
      )}
    </section>
  );
}