import { useWorkspace, useWorkspaceRole } from "../../lib/context";
import { EntitlementStatus } from "../Billing/EntitlementStatus";
import { useEntitlements } from "../../lib/entitlements";
import { get } from "../../lib/useApi";
import { DestinationConfig, FunctionConfig, StreamConfig } from "../../lib/schema";
import React, { useEffect, useState } from "react";
import { SomeZodObject, z } from "zod";
import { ConfigurationObjectLinkDbModel } from "../../prisma/schema";
import { useRouter } from "next/router";
import { assertTrue, getLog, requireDefined } from "juava";
import { Alert, Button, Input, InputNumber, Radio, Switch, Tooltip } from "antd";
import { BaseBulkerConnectionOptions, getCoreDestinationType } from "../../lib/schema/destinations";
import { confirmOp, copyTextToClipboard, feedbackError, feedbackSuccess } from "../../lib/ui";
import FieldListEditorLayout, { EditorItem } from "../FieldListEditorLayout/FieldListEditorLayout";
import { DataLayoutType } from "@jitsu/protocols/analytics";
import { Activity, Copy } from "lucide-react";
import { useBilling } from "../Billing/BillingProvider";
import {
  hasIdentityStitching,
  IDENTITY_STITCHING_FUNCTION_ID,
  IDENTITY_STITCHING_OFF_WARNING,
} from "../../lib/shared/plan-features";
import styles from "./ConnectionEditorPage.module.css";
import { Htmlizer } from "../Htmlizer/Htmlizer";
import { FunctionsSelector } from "../FunctionsSelector/FunctionsSelector";
import { Expandable } from "../Expandable/Expandable";
import { useStoreReload } from "../../lib/store";
import { DestinationSelector } from "../Selectors/DestinationSelector";
import { SourceSelector } from "../Selectors/SourceSelector";
import { FunctionVariables } from "../FunctionsDebugger/FunctionVariables";
import { EditorToolbar } from "../EditorToolbar/EditorToolbar";
import JSON5 from "json5";
import { toURL } from "../../lib/shared/url";
import { BackButton } from "../BackButton/BackButton";
import { JitsuButton } from "../JitsuButton/JitsuButton";

const log = getLog("ConnectionEditorPage");

type ConnectionOptionsType = Partial<BaseBulkerConnectionOptions> & { [key: string]: any };

type EditorProps<T> = {
  value?: T;
  disabled?: boolean;
  onChange: (value: T) => void;
};

type EditorComponent<T, P = {}> = React.FC<EditorProps<T> & P>;

const DataLayoutEditor: EditorComponent<DataLayoutType, { fileStorage?: boolean }> = props => (
  <Radio.Group
    disabled={props.disabled}
    className={styles.radioGroup}
    value={props.value}
    onChange={val => props.onChange(val.target.value)}
  >
    <div className={"flex flex-col gap-2"}>
      {(props.fileStorage || props.value === "passthrough") && (
        <Radio value="passthrough">
          <div>
            <div className={``}>Original</div>
            <div className={`text-textLight text-sm`}>Keep original event structure.</div>
          </div>
        </Radio>
      )}
      <Radio value="segment-single-table">
        <div>
          <div className={``}>
            Single Table{!props.fileStorage ? <span className="text-textDark font-bold"> (recommended)</span> : <></>}
          </div>
          <div className={`max-w-2xl text-textLight text-sm`}>
            The data is written into a table <code>events</code>. Field names and naming convention are same as in
            Segment
          </div>
        </div>
      </Radio>
      <Radio value="segment">
        <div>
          <div className={``}>Segment</div>
          <div className={`text-textLight text-sm`}>
            This data layout emulates segment tables: <code>pages</code>, <code>identify</code>, etc
          </div>
        </div>
      </Radio>
      <Radio value="jitsu-legacy">
        <div>
          <div className={``}>Legacy Jitsu</div>
          <div className={`text-textLight text-sm`}>
            Table name <code>events</code>. Field names are as in Jitsu 1.0
          </div>
        </div>
      </Radio>
    </div>
  </Radio.Group>
);

export const BatchOrStreamEditor: EditorComponent<ConnectionOptionsType["mode"], { limitations?: any }> = ({
  value,
  disabled,
  onChange,
  limitations,
}) => {
  const [streamModeState, setStreamModeState] = useState<"locked" | "disabled" | "allowed">("allowed");
  const [streamModeCaveats, setStreamModeCaveats] = useState<string>();

  useEffect(() => {
    if (limitations?.streamModeLocked) {
      setStreamModeState(value !== "stream" ? "locked" : "allowed");
      setStreamModeCaveats(limitations?.streamModeLocked);
    } else if (limitations?.streamModeDisabled) {
      setStreamModeState("disabled");
      setStreamModeCaveats(limitations?.streamModeDisabled);
    } else {
      setStreamModeState("allowed");
      setStreamModeCaveats(undefined);
    }
  }, [limitations, value]);

  return (
    <Radio.Group
      className={styles.radioGroup}
      value={streamModeState === "disabled" ? "batch" : value || "batch"}
      disabled={disabled}
      onChange={e => onChange(e.target.value)}
    >
      <div className={"flex flex-col gap-2"}>
        <Radio value="stream" disabled={disabled || streamModeState !== "allowed"}>
          <div>
            <div className={``}>
              Stream
              {streamModeState === "locked" && (
                <Button
                  className="m-0 p-0"
                  type="link"
                  size="small"
                  onClick={() => {
                    setStreamModeState("allowed");
                  }}
                >
                  🔒
                </Button>
              )}
            </div>
            <div className={`max-w-2xl text-textLight text-sm`}>
              <Htmlizer>{streamModeCaveats}</Htmlizer>
            </div>
          </div>
        </Radio>
        <Radio value="batch">Batch</Radio>
      </div>
    </Radio.Group>
  );
};

export const SyncFrequencyEditor: EditorComponent<ConnectionOptionsType["frequency"]> = ({
  value,
  disabled,
  onChange,
}) => (
  <InputNumber
    disabled={disabled}
    value={value}
    size="small"
    addonAfter={"Minutes"}
    className="w-36"
    min={1}
    max={60 * 24}
    onChange={v => onChange(v as number)}
  />
);

type TextEditorComponent = EditorComponent<string, { className?: string; rows?: number }>;
type SwitchComponentType = EditorComponent<boolean, { className?: string }>;

const TextEditor: TextEditorComponent = ({ rows, value, onChange, disabled, className }) => {
  if (rows && rows > 1) {
    return (
      <Input.TextArea
        rows={rows}
        className={className}
        disabled={disabled}
        value={value}
        onChange={e => onChange(e.target.value)}
      />
    );
  } else {
    return (
      <Input
        className={className}
        disabled={disabled}
        type="text"
        value={value}
        onChange={e => onChange(e.target.value)}
      />
    );
  }
};

export const SwitchComponent: SwitchComponentType = ({ value, disabled, onChange, className }) => {
  return (
    <Switch
      className={className}
      disabled={disabled}
      checked={value}
      defaultChecked={value}
      onChange={checked => onChange(checked)}
    />
  );
};

function hasZodFields(zod: SomeZodObject, ...fields: (keyof ConnectionOptionsType)[]) {
  for (const f of fields) {
    if (!zod.shape.hasOwnProperty(f)) {
      return false;
    }
  }
  return true;
}

function ConnectionEditor({
  streams,
  destinations,
  links,
  functions,
}: {
  streams: StreamConfig[];
  destinations: DestinationConfig[];
  links: z.infer<typeof ConfigurationObjectLinkDbModel>[];
  functions: FunctionConfig[];
}) {
  const router = useRouter();
  const existingLink = router.query.id ? links.find(link => link.id === router.query.id) : undefined;

  assertTrue(streams.length > 0, `Streams list is empty`);
  assertTrue(destinations.length > 0, `Destinations list is empty`);

  const [loading, setLoading] = useState(false);
  const workspace = useWorkspace();
  const role = useWorkspaceRole();
  const canEdit = role.editEntities;
  const billing = useBilling();
  // JITSU-228: Identity Stitching is Enterprise-only. Resolved by the server
  // rather than from useBilling(), which is unavailable on an EE install
  // without Firebase, where the server still enforces. Self-hosted consoles have
  // no plans and the endpoint allows everything there.
  const entitlements = useEntitlements();
  const identityStitchingPlanTooLow = entitlements.identityStitching === false;
  const [dstId, setDstId] = useState(existingLink?.toId || destinations[0].id);
  const [srcId, setSrcId] = useState(existingLink?.fromId || streams[0].id);

  const destination = requireDefined(
    destinations.find(d => d.id === dstId),
    `Destination ${dstId} not found in ${destinations.map(d => d.id).join(", ")}`
  );
  const destinationType = getCoreDestinationType(destination.destinationType);
  const connectionOptionsZodType = destinationType.connectionOptions;

  // parse() fills the schema's 60m default for an absent `frequency`. That's right
  // for a new connection (the value is persisted on save), but an existing link
  // saved without `frequency` really runs on bulker's fallback period
  // (BATCH_RUNNER_DEFAULT_PERIOD_SEC, 1m in cloud) — keep the field empty so the
  // editor shows that instead of a value that was never stored.
  const [connectionOptions, setConnectionOptions] = useState<ConnectionOptionsType>(() => {
    const parsed = connectionOptionsZodType.parse(existingLink?.data || {});
    if (existingLink && (existingLink.data as any)?.frequency == null) {
      parsed.frequency = undefined;
    }
    return parsed;
  });

  //Once destination is changed, we need to update default connection options
  const updateConnectionOptions = (selectedDestination: string) => {
    const destination = requireDefined(
      destinations.find(d => d.id === selectedDestination),
      `Destination ${selectedDestination} not found in ${destinations.map(d => d.id).join(", ")}`
    );
    const newConnectionOptions = getCoreDestinationType(destination.destinationType).connectionOptions.parse({});
    log.atDebug().log("Updating connection options to", newConnectionOptions);
    setConnectionOptions(newConnectionOptions);
  };

  const updateOptions: (patch: Partial<ConnectionOptionsType>) => void = patch => {
    log.atDebug().log("Patching connection options with", patch, " existing options", connectionOptions);
    setConnectionOptions({ ...connectionOptions, ...patch });
  };

  const [limitations, setLimitations] = useState<any>({});
  const reloadStore = useStoreReload();

  useEffect(() => {
    if (connectionOptionsZodType) {
      const description = connectionOptionsZodType.description;
      if (description) {
        try {
          const obj = JSON.parse(description);
          setLimitations(obj.limitations || {});
        } catch (e) {
          console.error(e);
        }
      } else {
        setLimitations({});
      }
    }
  }, [connectionOptionsZodType]);

  const usesBulker = destinationType.usesBulker || destinationType.id === "webhook";

  const configItems: EditorItem[] = [
    {
      name: "Enabled",
      component: (
        <SwitchComponent
          value={!connectionOptions.disabled}
          onChange={enabled => {
            updateOptions({ disabled: !enabled });
          }}
        />
      ),
    },
    {
      name: existingLink ? "Select Source" : "Source",
      documentation: "Select destination to connect",
      component: (
        <SourceSelector
          items={streams}
          selected={srcId}
          showLink={true}
          enabled={canEdit && !existingLink}
          disabledReason={"Create a new connection if you want to change the source"}
          onSelect={setSrcId}
        />
      ),
    },
    {
      name: existingLink ? "Select Destination" : "Destination",
      documentation: existingLink
        ? "You can't change destination of existing connection. Please create a new one"
        : "Select destination to connect",
      component: (
        <DestinationSelector
          items={destinations}
          selected={dstId}
          enabled={canEdit && !existingLink}
          disabledReason={"Create a new connection if you want to change the source"}
          showLink={true}
          onSelect={id => {
            setDstId(id);
            updateConnectionOptions(id);
          }}
        />
      ),
    },
  ];
  if (hasZodFields(connectionOptionsZodType, "mode")) {
    configItems.push({
      name: "Sync Mode",
      documentation: (
        <>
          <p>
            <b>stream</b> mode sends data to destination as soon as it is received from source, however it's not
            scalable and not going to work for more that ~10 events per second. <br />
          </p>
          <p>
            <b>batch</b> mode sends data to destination in batches. It's scalable and recommended for most cases.
          </p>
        </>
      ),
      component: (
        <>
          <BatchOrStreamEditor
            value={connectionOptions.mode}
            disabled={!canEdit}
            limitations={limitations}
            onChange={mode => updateOptions({ mode })}
          />
          {destinationType.id === "webhook" &&
            destination.signatureMethod &&
            destination.signatureMethod !== "none" &&
            connectionOptions.mode === "batch" && (
              <Alert
                className="mt-2"
                type="warning"
                showIcon
                message="Request signing is not applied in batch mode. Switch to stream mode if you need signed webhooks."
              />
            )}
        </>
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "mode") && connectionOptions.mode === "batch") {
    configItems.push({
      name: "Sync Frequency",
      component: (
        <SyncFrequencyEditor
          disabled={!canEdit}
          value={connectionOptions.frequency ?? 1}
          onChange={frequency => updateOptions({ frequency })}
        />
      ),
    });
    configItems.push({
      name: "Max Batch Size",
      documentation: (
        <>
          Maximum number of events to send in one batch. If there are more events in queue than 'Batch Size', events
          will be sent as a sequence of batches with provided size.
        </>
      ),
      component: (
        <InputNumber
          value={connectionOptions.batchSize || 10000}
          size="small"
          disabled={!canEdit}
          defaultValue={10000}
          className="w-36"
          min={100}
          max={destinationType.id === "mixpanel" ? 2000 : 1000000}
          onChange={batchSize => updateOptions({ batchSize: batchSize ?? 10000 })}
        />
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "dataLayout")) {
    configItems.push({
      documentation: <>Data layout defines how data is written to database</>,
      name: "Data Layout",
      component: (
        <Tooltip title={!!existingLink ? "Can only be configured during the initial connection setup." : undefined}>
          {" "}
          <DataLayoutEditor
            disabled={!canEdit || !!existingLink}
            fileStorage={destinationType.id === "gcs" || destinationType.id === "s3"}
            onChange={dataLayout => {
              if (existingLink) updateOptions({ dataLayout });
              else {
                if (dataLayout === "jitsu-legacy") {
                  updateOptions({
                    dataLayout,
                    primaryKey: "eventn_ctx_event_id",
                    timestampColumn: "_timestamp",
                    keepOriginalNames: true,
                  });
                } else {
                  updateOptions({
                    dataLayout,
                    primaryKey: connectionOptionsZodType.parse({}).primaryKey || "message_id",
                    timestampColumn: "timestamp",
                  });
                }
              }
            }}
            value={connectionOptions.dataLayout || "segment-single-table"}
          />
        </Tooltip>
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "primaryKey")) {
    configItems.push({
      group: "Advanced",
      name: "Primary Key",
      documentation: (
        <>
          The unique field that should present in any event. In case of duplicated values, the new event will either
          replace the old one or be dropped as 'failed' event depending on 'Deduplicate' option. Don't change this field
          unless you know what you are doing.
          <br />
          <br />
          Keep in mind that for data warehouses, all field names get translated to <b>snake_case</b>. For example,{" "}
          <code>messageId</code> get translated to <code>message_id</code>.
        </>
      ),
      component: (
        <Tooltip title={!!existingLink ? "Can only be configured during the initial connection setup." : undefined}>
          {" "}
          <TextEditor
            className="max-w-xs"
            disabled={!canEdit || !!existingLink}
            value={connectionOptions.primaryKey}
            onChange={primaryKey => {
              updateOptions({ primaryKey, ...(primaryKey === "" ? { deduplicate: false } : {}) });
            }}
          />
        </Tooltip>
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "deduplicate")) {
    configItems.push({
      name: "Deduplicate",
      documentation: (
        <>
          Deduplicate events with repeated values of 'Primary Key'. If enabled, the new event with the same 'Primary
          Key' value will replace the old one. If disabled, the new event will be dropped as 'failed' event.
        </>
      ),
      component: (
        <div>
          <SwitchComponent
            className="max-w-xs"
            disabled={!canEdit || connectionOptions.primaryKey === ""}
            value={connectionOptions.deduplicate}
            onChange={deduplicate => {
              let functions = connectionOptions.functions ?? [];
              if (!deduplicate) {
                // remove user recognition function when deduplication is disabled
                functions = functions.filter(f => f.functionId !== IDENTITY_STITCHING_FUNCTION_ID);
              }
              updateOptions({ deduplicate, functions });
            }}
          />
          {destinationType.id === "bigquery" && (
            <div className={"text-sm font-light text-textLight mt-3"}>
              Deduplication relies on reading data from the database. Using the Deduplication feature may therefore lead
              to higher BigQuery costs. These additional costs increase linearly with the frequency of syncs.
            </div>
          )}
        </div>
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "timestampColumn")) {
    configItems.push({
      group: "Advanced",
      documentation: (
        <>The field that represents timestamp. Depending on database, the field might be used to partition data</>
      ),
      name: "Timestamp Column",
      component: (
        <Tooltip title={!!existingLink ? "Can only be configured during the initial connection setup." : undefined}>
          {" "}
          <TextEditor
            disabled={!canEdit || !!existingLink}
            className="max-w-xs"
            value={connectionOptions.timestampColumn}
            onChange={timestampColumn => {
              updateOptions({ timestampColumn });
            }}
          />
        </Tooltip>
      ),
    });
  }
  if (
    hasZodFields(connectionOptionsZodType, "deduplicateWindow") &&
    (destinationType.id === "bigquery" || destinationType.id === "redshift" || destinationType.id === "snowflake")
  ) {
    configItems.push({
      group: "Advanced",
      documentation: (
        <>
          To optimize query performance, Jitsu detects the timestamp range of each incoming batch and checks for
          duplicates only within that range in the historical data.
          <br />
          <br />
          This setting limits the maximum date range over which deduplication is applied. It can reduce processing time
          and costs when ingesting batches with a wide range of timestamps, by skipping deduplication for older records.
        </>
      ),
      name: "Deduplicate Window",
      component: (
        <InputNumber
          value={connectionOptions.deduplicateWindow || 365}
          disabled={
            !canEdit ||
            connectionOptions.primaryKey === "" ||
            !connectionOptions.deduplicate ||
            connectionOptions.timestampColumn === ""
          }
          size="small"
          defaultValue={31}
          className="w-36"
          min={1}
          max={1000000}
          onChange={deduplicateWindow => updateOptions({ deduplicateWindow: deduplicateWindow ?? 365 })}
        />
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "functions", "deduplicate") && !limitations?.identityStitchingDisabled) {
    // JITSU-228: a connection that already has Identity Stitching on keeps it —
    // only switching it on is gated, matching assertIdentityStitchingAllowed on
    // the server. That leaves a grandfathered connection free to turn it off,
    // and the server will refuse to turn it back on afterwards — so turning it
    // off on such a plan asks first.
    const identityStitchingOn = hasIdentityStitching(connectionOptions);
    // What the stored connection has, not the form: the server compares against
    // the stored connection, so switching it off and back on before Save is a
    // no-op there. Locking on the form state instead would grey the switch the
    // instant it was turned off and leave the mistake impossible to undo.
    const identityStitchingSaved = hasIdentityStitching(existingLink?.data);
    const identityStitchingLocked = entitlements.identityStitching !== true && !identityStitchingSaved;
    configItems.push({
      group: "Advanced",
      documentation: (
        <>
          Identity Stitching Function retroactively updates data rows of anonymous user events with userId and traits as
          soon as user sings in. For correct work 'Deduplicate' option must be enabled.
        </>
      ),
      name: "Identity Stitching",
      component: (
        <div data-testid="identity-stitching">
          {identityStitchingPlanTooLow && !identityStitchingSaved && (
            // Inline, not in `documentation`: that is rendered behind a help
            // icon by DocumentedLabel, so a locked user would see a greyed-out
            // switch and no reason for it — and no hover at all on touch.
            <div className="mb-2 text-textLight">
              Available on the <b className="uppercase">Enterprise</b> plan.{" "}
              <a href="https://jitsu.com/contact?utm_source=app" target="_blank" rel="noopener noreferrer">
                Contact sales
              </a>{" "}
              to enable it.
            </div>
          )}
          {entitlements.identityStitching === null && !identityStitchingSaved && (
            <EntitlementStatus loading={entitlements.loading} retry={entitlements.retry} />
          )}
          <SwitchComponent
            disabled={
              !canEdit ||
              connectionOptions.primaryKey === "" ||
              !connectionOptions.deduplicate ||
              identityStitchingLocked
            }
            className="max-w-xs"
            value={identityStitchingOn}
            onChange={async ur => {
              // Only on an explicit "plan too low": with the lookup unknown (null)
              // nothing is known about whether it could be turned back on.
              if (!ur && identityStitchingOn && identityStitchingPlanTooLow) {
                if (!(await confirmOp(IDENTITY_STITCHING_OFF_WARNING))) {
                  return;
                }
              }
              const f = (connectionOptions.functions ?? []).filter(
                f => f.functionId !== IDENTITY_STITCHING_FUNCTION_ID
              );
              if (ur) {
                f.push({
                  functionId: IDENTITY_STITCHING_FUNCTION_ID,
                });
              }
              updateOptions({ functions: f });
            }}
          />
        </div>
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "schemaFreeze") && existingLink) {
    configItems.push({
      group: "Advanced",
      documentation: (
        <>
          By default, Jitsu automatically creates table columns for any new properties in events. If your table is
          already in desired state and you want to control further table schema changes you can enable{" "}
          <b>Schema Freeze</b>
          <br />
          With <b>Schema Freeze</b> enabled Jitsu will no longer apply changes to table schema, but incoming data for
          any properties that don't have corresponding columns will be stored in <code>_unmapped_data</code> column in
          JSON format.
        </>
      ),
      name: "Schema Freeze",
      component: (
        <SwitchComponent
          className="max-w-xs"
          disabled={!canEdit}
          value={connectionOptions.schemaFreeze}
          onChange={sf => {
            updateOptions({ schemaFreeze: sf });
          }}
        />
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "keepOriginalNames") && connectionOptions.dataLayout !== "jitsu-legacy") {
    configItems.push({
      group: "Advanced",
      documentation: (
        <>
          By default, Jitsu translate all event properties to snakeCase, e.g.: <code>myPropertyName</code> is translated
          to <code>my_property_name</code>.<br />
          Enable this option if you want to keep original names
        </>
      ),
      name: "Keep Original Names",
      component: (
        <Tooltip title={!!existingLink ? "Can only be configured during the initial connection setup." : undefined}>
          {" "}
          <SwitchComponent
            disabled={!canEdit || !!existingLink}
            className="max-w-xs"
            value={connectionOptions.keepOriginalNames}
            onChange={sf => {
              const opts = { keepOriginalNames: sf } as any;
              if (sf && connectionOptions.primaryKey === "message_id") {
                opts.primaryKey = "messageId";
              } else if (!sf && connectionOptions.primaryKey === "messageId") {
                opts.primaryKey = "message_id";
              }
              updateOptions(opts);
            }}
          />
        </Tooltip>
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "clickhouseSettings") && destinationType.id === "clickhouse") {
    configItems.push({
      group: "Advanced",
      name: "Clickhouse Settings",
      documentation: (
        <>
          <a
            target={"_blank"}
            rel={"noreferrer noopener"}
            href={"https://clickhouse.com/docs/en/operations/settings/settings"}
          >
            Clickhouse Settings
          </a>{" "}
          are used to configure Clickhouse connection. Format is <code>key=value</code> separated by new line. This
          settings will be merged with <b>Parameters</b> configured in destination.
        </>
      ),
      component: (
        <TextEditor
          disabled={!canEdit}
          className="max-w-xs"
          rows={2}
          value={connectionOptions.clickhouseSettings}
          onChange={clickhouseSettings => {
            updateOptions({ clickhouseSettings });
          }}
        />
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "events")) {
    configItems.push({
      documentation: (
        <>
          Events that trigger tag insertion. Base events <code>page</code>, <code>identify</code>, <code>group</code>,{" "}
          <code>track</code>, and custom event names used with <code>track</code> call can be provided.
          <br />
          One per line
        </>
      ),
      name: "Events Allowlist",
      component: (
        <TextEditor
          className="max-w-xs"
          disabled={!canEdit}
          rows={5}
          value={connectionOptions.events}
          onChange={events => {
            updateOptions({ events });
          }}
        />
      ),
    });
  }
  if (hasZodFields(connectionOptionsZodType, "hosts")) {
    configItems.push({
      documentation: (
        <>
          Hosts on witch tag will be inserted. You can use a wildcard as in <code>*.domain.com</code>. To include domain
          and all subdomain add two entries: <code>*.domain.com</code> and <code>domain.com</code>
          <br />
          One per line
          <br />
          Use * for all hosts
        </>
      ),
      name: "Hosts Allowlist",
      component: (
        <TextEditor
          disabled={!canEdit}
          className="max-w-xs"
          rows={3}
          value={connectionOptions.hosts}
          onChange={hosts => {
            updateOptions({ hosts });
          }}
        />
      ),
    });
  }
  // if (hasZodFields(connectionOptionsZodType, "multithreading")) {
  //   configItems.push({
  //     group: "Advanced",
  //     documentation: (
  //       <>
  //         Use multiple threads to send data to the endpoint. Faster, but doesn't guarantee order of events. Recommended
  //         on high volumes of data.
  //       </>
  //     ),
  //     name: "Multithreading",
  //     component: (
  //       <SwitchComponent
  //         className="max-w-xs"
  //         value={connectionOptions.multithreading}
  //         onChange={m => {
  //           updateOptions({ multithreading: m });
  //         }}
  //       />
  //     ),
  //   });
  // }
  return (
    <div className="max-w-5xl grow">
      <div className="flex justify-between pb-4 mb-0 items-center">
        <h1 className="text-3xl">{(existingLink ? "Edit" : "Create") + " connection"}</h1>
        <BackButton href={`/${workspace.slugOrId}/connections`} />
      </div>
      {existingLink && (
        <div>
          <EditorToolbar
            items={
              [
                {
                  title: "ID: " + existingLink.id,
                  icon: <Copy className="w-full h-full" />,
                  href: "#",
                  onClick: () => {
                    copyTextToClipboard(existingLink.id);
                    feedbackSuccess("Copied to clipboard");
                  },
                },
                {
                  title: "Logs",
                  icon: <Activity className="w-full h-full" />,
                  href: toURL(`/${workspace.slugOrId}/data`, {
                    query: JSON5.stringify({
                      activeView: usesBulker ? "bulker" : "function",
                      viewState: { [usesBulker ? "bulker" : "function"]: { actorId: existingLink.id } },
                    }),
                  }),
                },
              ].filter(Boolean) as any
            }
            className="mb-4"
          />
        </div>
      )}
      <div className="w-full">
        <FieldListEditorLayout
          groups={{
            Advanced: { expandable: true },
          }}
          items={configItems}
        />
        <Expandable
          initiallyExpanded={!!connectionOptions.functions?.length}
          title={<h2 className="font-bold my-4 text-xl text-textDark">Functions</h2>}
          hideArrow={false}
          caretSize="1.5em"
          contentLeftPadding={false}
        >
          <FunctionsSelector
            disabled={!canEdit}
            functions={functions}
            stream={streams.find(s => s.id === srcId) || streams[0]}
            destination={destinations.find(d => d.id === dstId) || destinations[0]}
            selectedFunctions={connectionOptions.functions}
            onChange={enabledFunctions => {
              const nonUdfs = (connectionOptions.functions ?? []).filter(f => !f.functionId.startsWith("udf."));
              const enabledF = enabledFunctions.map(f => ({ functionId: `udf.${f.id}` }));
              if (nonUdfs.length > 0) {
                enabledF.push(...nonUdfs);
              }
              updateOptions({ functions: enabledF });
            }}
          />
        </Expandable>
        <Expandable
          initiallyExpanded={!!connectionOptions.functions?.length}
          title={<h2 className="font-bold my-4 text-xl text-textDark">Environment Variables</h2>}
          hideArrow={false}
          caretSize="1.5em"
          contentLeftPadding={false}
        >
          <div className={"text-textLight px-1 mb-4"}>
            Provided variables can be used inside functions via <code>process.env</code> object. For example:{" "}
            <code>process.env.DEBUG</code>
          </div>
          <FunctionVariables
            className={"!px-0"}
            value={connectionOptions.functionsEnv || {}}
            onChange={functionsEnv => updateOptions({ functionsEnv })}
          />
        </Expandable>
      </div>
      <div className="flex justify-between pt-6">
        <div>
          {existingLink && (
            <JitsuButton
              loading={loading}
              type="primary"
              ghost
              danger
              requiredPermission={"deleteEntities"}
              size="large"
              onClick={async () => {
                if (await confirmOp("Are you sure you want to unlink this site from this destination?")) {
                  setLoading(true);
                  try {
                    await get(`/api/${workspace.id}/config/link`, {
                      method: "DELETE",
                      query: { id: existingLink.id },
                    });
                    await reloadStore();
                    feedbackSuccess("Successfully unliked");
                    router.back();
                  } catch (e) {
                    feedbackError("Failed to unlink site and destination", { error: e });
                  } finally {
                    setLoading(false);
                  }
                }
              }}
            >
              Delete
            </JitsuButton>
          )}
        </div>
        <div className="flex justify-end space-x-5">
          <Button
            type="primary"
            ghost
            size="large"
            disabled={loading}
            onClick={() => {
              if (router.query.backTo) {
                router.push(`/${workspace.slugOrId}${router.query.backTo}`);
              } else {
                router.back();
              }
            }}
          >
            Cancel
          </Button>
          <JitsuButton
            type="primary"
            size="large"
            requiredPermission={"editEntities"}
            loading={loading}
            disabled={loading}
            onClick={async () => {
              setLoading(true);
              try {
                await get(`/api/${workspace.id}/config/link`, {
                  body: {
                    ...(existingLink ? { id: existingLink.id } : {}),
                    fromId: srcId,
                    toId: dstId,
                    type: "push",
                    data: connectionOptions,
                  },
                });
                await reloadStore();
                if (router.query.backTo) {
                  router.push(`/${workspace.slugOrId}${router.query.backTo}`);
                } else {
                  router.back();
                }
              } catch (error) {
                feedbackError(`Can't link destinations`, { error });
              } finally {
                setLoading(false);
              }
            }}
          >
            Save
          </JitsuButton>
        </div>
      </div>
    </div>
  );
}

export default ConnectionEditor;