import { Label } from "@repo/shadcn-ui/components/label";
import { SelectWithAction } from "@repo/shadcn-ui/components/select-with-action";
import { useId } from "react";
import { useTranslation } from "react-i18next";

import type { CatalogItemDTO, ResourceInput, ResourceReferenceDTO } from "../common";

export function mailboxIntegration(
  items: readonly CatalogItemDTO[],
  previous?: ResourceInput["integration"]
) {
  if (previous?.kind === "mailbox") {
    return previous;
  }
  const addressFieldId = items.find((item) => item.builtinKey === "field:email")?.id;
  const contextFieldId = items.find((item) => item.builtinKey === "field:context")?.id;
  return addressFieldId && contextFieldId
    ? {
        kind: "mailbox" as const,
        addressFieldId,
        contextFieldId,
        mailboxKind: "corporate" as const,
        accountId: null,
      }
    : undefined;
}
export function ResourceIntegrationFields({
  templateKey,
  integration,
  items,
  references,
  fixed,
  onChange,
}: {
  templateKey: string | null | undefined;
  integration: ResourceInput["integration"];
  items: readonly CatalogItemDTO[];
  references: readonly ResourceReferenceDTO[];
  fixed: boolean;
  onChange: (value: ResourceInput["integration"]) => void;
}) {
  const { t } = useTranslation("resources");
  const prefix = useId();
  const mailbox =
    integration?.kind === "mailbox"
      ? integration
      : templateKey === "template:mailbox"
        ? mailboxIntegration(items)
        : undefined;
  if (mailbox) {
    return (
      <div className="grid gap-4 sm:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor={`${prefix}-kind`}>{t("mailboxKind")}</Label>
          <SelectWithAction
            disabled={fixed}
            id={`${prefix}-kind`}
            label={t("mailboxKind")}
            onValueChange={(value) => {
              if (value === "corporate" || value === "external") {
                onChange({ ...mailbox, mailboxKind: value });
              }
            }}
            options={["corporate", "external"].map((value) => ({ value, label: t(value) }))}
            placeholder={t("chooseValue")}
            value={mailbox.mailboxKind}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor={`${prefix}-account`}>{t("relatedAccount")}</Label>
          <SelectWithAction
            id={`${prefix}-account`}
            label={t("relatedAccount")}
            onValueChange={(value) =>
              onChange({ ...mailbox, accountId: value === "none" ? null : value })
            }
            options={[
              { value: "none", label: t("noValue") },
              ...references
                .filter(
                  (item) =>
                    item.kind === "account" && (item.active || item.id === mailbox.accountId)
                )
                .map((item) => ({ value: item.id, label: item.name })),
            ]}
            placeholder={t("chooseValue")}
            value={mailbox.accountId ?? "none"}
          />
        </div>
      </div>
    );
  }
  if (templateKey !== "template:access" && integration?.kind !== "access") {
    return null;
  }
  const referenceFieldId =
    integration?.kind === "access"
      ? integration.referenceFieldId
      : items.find((item) => item.builtinKey === "field:reference")?.id;
  if (!referenceFieldId) {
    return null;
  }
  const access = integration?.kind === "access" ? integration : undefined;
  const change = (key: "resourceTypeId" | "systemId" | "environmentId", value: string) => {
    const resourceTypeId = key === "resourceTypeId" ? value : access?.resourceTypeId;
    if (!resourceTypeId) {
      return;
    }
    const systemId = key === "systemId" ? optionalReference(value) : (access?.systemId ?? null);
    let environmentId = access?.environmentId ?? null;
    if (key === "systemId") {
      environmentId = null;
    } else if (key === "environmentId") {
      environmentId = optionalReference(value);
    }
    onChange({ kind: "access", referenceFieldId, resourceTypeId, systemId, environmentId });
  };
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      {(["resourceTypeId", "systemId", "environmentId"] as const).map((key) => {
        const kind =
          key === "resourceTypeId"
            ? "resource_type"
            : key === "systemId"
              ? "system"
              : "environment";
        const selected = access?.[key] ?? "none";
        const options = references
          .filter(
            (item) =>
              item.kind === kind &&
              (item.active || item.id === selected) &&
              (kind !== "environment" || item.systemId === access?.systemId)
          )
          .map((item) => ({ value: item.id, label: item.name }));
        return (
          <div className="space-y-2" key={key}>
            <Label htmlFor={prefix + key}>{t(key)}</Label>
            <SelectWithAction
              disabled={
                fixed ||
                (key === "environmentId" && !access?.systemId) ||
                (key !== "resourceTypeId" && !access)
              }
              id={prefix + key}
              label={t(key)}
              onValueChange={(value) => {
                if (key !== "resourceTypeId" || value !== "none") {
                  change(key, value);
                }
              }}
              options={[{ value: "none", label: t("noValue") }, ...options]}
              placeholder={t("chooseValue")}
              value={selected}
            />
          </div>
        );
      })}
    </div>
  );
}

function optionalReference(value: string) {
  return value === "none" ? null : value;
}