import foundation from "~/common/foundation.js";
import { effect } from "~/common/signal.js";

import { NAME as ATPROTO_OUTPUT_NAME } from "~/components/output/raw/atproto/element.js";
import { NAME as ATPROTO_SYNC_NAME } from "~/components/transformer/output/raw/atproto-sync/element.js";
import { NAME as ATPROTO_PASSKEY_NAME } from "~/components/transformer/output/refiner/track-uri-passkey/element.js";

import { NAME as S3_OUTPUT_NAME } from "~/components/output/bytes/s3/element.js";
import { NAME as S3_SYNC_NAME } from "~/components/transformer/output/bytes/dasl-sync/element.js";


/**
 * @import OutputOrchestrator from "~/components/orchestrator/output/element.js"
 */

/** @type {Set<string>} */
let previouslyActivated = new Set();

/**
 * Setup DOM elements when needed.
 */
effect(() => {
  const output = foundation.signals.orchestrator.output();
  if (!output) return;

  atproto(output);
  s3(output);

  output.loadSelected();
});

/**
 * Dynamically import custom elements when needed.
 */
effect(() => {
  const output = foundation.signals.orchestrator.output();
  if (!output) return;

  const set = output.activated();
  const newlyActicated = set.difference(previouslyActivated);

  previouslyActivated = set;

  Array.from(newlyActicated).map((id) => {
    switch (id) {
      case "do-output__dc-output__atproto":
        return atprotoCustomElements();
      case "do-output__dc-output__s3":
        return s3CustomElements();
    }
  });
});

////////////////////////////////////////////
// AT PROTOCOL
////////////////////////////////////////////

/**
 * Adds a few extra layers of functionality to the AT Protocol output,
 * optional passkey encryption and local-first syncing.
 *
 * @param {OutputOrchestrator} output
 */
export function atproto(output) {
  const out = document.createElement(ATPROTO_OUTPUT_NAME);
  out.setAttribute("group", foundation.GROUP);
  out.setAttribute("id", "do-output__dor-atproto");

  const sync = document.createElement(ATPROTO_SYNC_NAME);
  sync.setAttribute("group", foundation.GROUP);
  sync.setAttribute("id", "do-output__dtor-atproto-sync");
  sync.setAttribute("namespace", "atproto");
  sync.setAttribute("output-selector", "#do-output__dor-atproto");

  const passkey = document.createElement(ATPROTO_PASSKEY_NAME);
  passkey.setAttribute("group", foundation.GROUP);
  passkey.setAttribute("id", "do-output__dc-output__atproto");
  passkey.setAttribute("label", "AT Protocol");
  passkey.setAttribute("namespace", "atproto");
  passkey.setAttribute(
    "output-selector",
    "#do-output__dtor-atproto-sync",
  );

  // Add elements to DOM, make sure the transformer
  // is added to the configurator so the user can select it.
  output.append(out);
  output.append(sync);
  output.outputConfigurator.append(passkey);
}

export function atprotoCustomElements() {
  import("~/components/output/raw/atproto/element.js");
  import(
    "~/components/transformer/output/raw/atproto-sync/element.js"
  );
  import(
    "~/components/transformer/output/refiner/track-uri-passkey/element.js"
  );
}

////////////////////////////////////////////
// S3
////////////////////////////////////////////

/**
 * Wraps user data in a custom CBOR encode data structure
 * which tracks what identifiers are removed.
 * The transformer used here allows for merging of data.
 *
 * @param {OutputOrchestrator} output
 */
export function s3(output) {
  const out = document.createElement(S3_OUTPUT_NAME);
  out.setAttribute("group", foundation.GROUP);
  out.setAttribute("id", "do-output__dob-s3");

  const sync = document.createElement(S3_SYNC_NAME);
  sync.setAttribute("group", foundation.GROUP);
  sync.setAttribute("id", "do-output__dc-output__s3");
  sync.setAttribute("label", "S3");
  sync.setAttribute("namespace", "s3");
  sync.setAttribute("output-selector", "#do-output__dob-s3");

  // Add elements to DOM, make sure the transformer
  // is added to the configurator so the user can select it.
  output.append(out);
  output.outputConfigurator.append(sync);
}

export function s3CustomElements() {
  import("~/components/output/bytes/s3/element.js");
  import(
    "~/components/transformer/output/bytes/dasl-sync/element.js"
  );
}