import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { useQuery } from "@tanstack/react-query";
import type { ComponentType } from "react";
import { useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";

import type { AccessFieldsDTO, AccessResponseDTO, PersonDTO } from "../../common";
import { PersonForm } from "../components/person-form";

import { accessApi, accessKeys } from "./access-api";
import { createLabels } from "./access-fields";
import type { AccessFormProps } from "./access-form-props";
import { QuickCreateDialog } from "./quick-create-dialog";
import type { QuickCreatePlan } from "./quick-create-plan";

export function AccessQuickEditor({
  plan,
  scope,
  data,
  people,
  csrfToken,
  onCreated,
  onClose,
  nestedAccessForm: NestedAccessForm,
}: {
  plan: QuickCreatePlan;
  scope: string;
  data: AccessResponseDTO;
  people: readonly PersonDTO[];
  csrfToken: string;
  onCreated: (id?: string, values?: AccessFieldsDTO) => void;
  onClose: () => void;
  nestedAccessForm: ComponentType<AccessFormProps>;
}) {
  const { t } = useTranslation("access");
  const active = useRef(true);
  useEffect(() => {
    active.current = true;
    return () => {
      active.current = false;
    };
  }, []);
  const close = () => {
    active.current = false;
    onClose();
  };
  const created = (id?: string, values?: AccessFieldsDTO) => {
    if (active.current) {
      onCreated(id, values);
    }
  };
  const globalQuery = useQuery({
    queryKey: accessKeys.scope("global"),
    queryFn: () => accessApi.request("global"),
    enabled: plan.type === "access" && plan.scope === "global" && scope !== "global",
  });
  if (plan.type === "simple") {
    return (
      <QuickCreateDialog
        csrfToken={csrfToken}
        items={data.items}
        onClose={close}
        onCreated={created}
        scope={scope}
        target={plan.target}
      />
    );
  }
  const title = plan.type === "person" ? "quickAddPerson" : createLabels[plan.kind];
  const childData = plan.type === "access" && plan.scope !== scope ? globalQuery.data : data;
  return (
    <FormDialog
      cancelLabel={t("cancel")}
      formActions
      onOpenChange={(open) => {
        if (!open) {
          close();
        }
      }}
      open
      title={t(title)}
      wide
    >
      {plan.type === "person" ? (
        <>
          <p className="text-sm text-muted-foreground">{t("quickCreateNotice")}</p>
          <PersonForm companyId={scope} csrfToken={csrfToken} onSaved={created} requireActive />
        </>
      ) : (
        <>
          <p className="text-sm text-muted-foreground">
            {t(plan.scope === "global" ? "quickGlobalNotice" : "quickCreateNotice")}
          </p>
          {childData ? (
            <NestedAccessForm
              allowQuickCreate={false}
              csrfToken={csrfToken}
              data={childData}
              initialValues={plan.defaults}
              kind={plan.kind}
              lockedFields={plan.locked}
              onSaved={created}
              people={people}
              scope={plan.scope}
            />
          ) : (
            <p role="status">{t("loading")}</p>
          )}
          {globalQuery.isError && <p role="alert">{t("errors.INTERNAL_ERROR")}</p>}
        </>
      )}
    </FormDialog>
  );
}