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

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

import { CatalogHelp } from "./catalog-help";
export function CatalogDefinitionDialog({
  item,
  items,
  onClose,
}: {
  item?: CatalogItemDTO | undefined;
  items: readonly CatalogItemDTO[];
  onClose: () => void;
}) {
  const { t } = useTranslation("resources");
  if (!item) {
    return null;
  }
  const values = item.values;
  return (
    <FormDialog
      cancelLabel={t("close")}
      onOpenChange={(open) => {
        if (!open) {
          onClose();
        }
      }}
      open
      title={t("viewDefinition", { name: values.name })}
      wide={values.kind === "template"}
    >
      <div className="space-y-4">
        {values.description && (
          <p className="text-sm text-muted-foreground">{values.description}</p>
        )}
        {values.kind === "field" ? (
          <dl className="space-y-2 text-sm">
            <div>
              <dt className="font-medium">{t("type")}</dt>
              <dd>{t(values.type)}</dd>
            </div>
            {values.unit && (
              <div>
                <dt className="font-medium">{t("unit")}</dt>
                <dd>{values.unit}</dd>
              </div>
            )}
            {values.choices.length > 0 && (
              <div>
                <dt className="font-medium">{t("choices")}</dt>
                <dd className="whitespace-pre-line">{values.choices.join("\n")}</dd>
              </div>
            )}
          </dl>
        ) : (
          <ul className="divide-y rounded-md border">
            {values.fields.map((binding) => {
              const field = items.find((entry) => entry.id === binding.fieldId);
              return (
                <li className="flex justify-between gap-4 p-3 text-sm" key={binding.fieldId}>
                  <div>
                    <p className="font-medium">{field?.values.name}</p>
                    {field?.values.kind === "field" && (
                      <p className="text-muted-foreground">
                        {t(field.values.type)}
                        {field.values.unit ? ` · ${field.values.unit}` : ""}
                      </p>
                    )}
                    {field && !field.effectiveActive && (
                      <p className="text-muted-foreground">{t("disabledField")}</p>
                    )}
                  </div>
                  <span>{t(binding.required ? "required" : "optional")}</span>
                </li>
              );
            })}
          </ul>
        )}
        {item.builtin && <p className="text-sm text-muted-foreground">{t("protected")}</p>}
        <CatalogHelp kind={values.kind} scope={item.companyId ?? "global"} />
      </div>
    </FormDialog>
  );
}