import { AssetSelect } from "@metis/assets/client";
import { FormLabel } from "@repo/rdx-ui/components/form-label";
import { SelectWithAction } from "@repo/rdx-ui/components/select-with-action";
import type { UseFormReturn } from "react-hook-form";
import { useTranslation } from "react-i18next";

import type { CompanyDTO } from "../../../../common";
import type { RemoteConnectionInput } from "../../../../common/remote-connections";
import type { RemoteQuickKind } from "../../create";

const targetActions = {
  network: { label: "newSite", kind: "site" },
  asset: { label: "remote.newAsset", kind: "target" },
  resource: { label: "remote.newResource", kind: "resource" },
} satisfies Record<RemoteConnectionInput["targetKind"], { label: string; kind: RemoteQuickKind }>;

export function RemoteTargetField({
  company,
  form,
  prefix,
  fixed,
  ready,
  assetOptions,
  resourceOptions,
  setQuick,
}: {
  company: CompanyDTO;
  form: UseFormReturn<RemoteConnectionInput>;
  prefix: string;
  fixed: boolean;
  ready: boolean;
  assetOptions: readonly { value: string; label: string }[];
  resourceOptions: readonly { value: string; label: string }[];
  setQuick: (kind: RemoteQuickKind) => void;
}) {
  const { t } = useTranslation("companies");
  const v = form.watch();
  const targetAction = targetActions[v.targetKind];
  const targetOptions = {
    network: [
      { value: "", label: t("remote.allCompany") },
      ...company.sites
        .filter((site) => site.active || (fixed && site.id === v.siteId))
        .map((s) => ({ value: s.id, label: s.name })),
    ],
    asset: assetOptions.filter((a) => a.value !== v.sourceAssetId),
    resource: resourceOptions,
  };

  const disabled = fixed || !ready;

  return (
    <div className="space-y-2">
      <FormLabel htmlFor={`${prefix}-target`} required={v.targetKind !== "network"}>
        {t(v.targetKind === "network" ? "remote.site" : "remote.target")}
      </FormLabel>
      {v.targetKind === "asset" ? (
        <AssetSelect
          action={
            fixed ? undefined : { label: t("remote.newAsset"), onClick: () => setQuick("target") }
          }
          companyId={company.id}
          disabled={disabled}
          id={`${prefix}-target`}
          label={t("remote.target")}
          onValueChange={(id) => form.setValue("targetId", id || null)}
          options={targetOptions.asset}
          placeholder={t("mail.choose")}
          required
          sites={company.sites}
          value={v.targetId ?? ""}
        />
      ) : (
        <SelectWithAction
          action={
            fixed
              ? undefined
              : {
                  label: t(targetAction.label),
                  onClick: () => setQuick(targetAction.kind),
                }
          }
          disabled={disabled}
          id={`${prefix}-target`}
          label={t(v.targetKind === "network" ? "remote.site" : "remote.target")}
          onValueChange={(id) =>
            form.setValue(v.targetKind === "network" ? "siteId" : "targetId", id || null)
          }
          options={targetOptions[v.targetKind]}
          placeholder={t(v.targetKind === "network" ? "remote.allCompany" : "mail.choose")}
          required={v.targetKind !== "network"}
          value={(v.targetKind === "network" ? v.siteId : v.targetId) ?? ""}
        />
      )}
    </div>
  );
}