import { createPluginContext } from "atlibs/plugin-context/index.js";

/*
 * References:
 *
 * - https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements
 */

// Create a class for the element
class ATLibsElement extends HTMLElement {
  static observedAttributes = ["color", "size"];

  constructor() {
    // Always call super first in constructor
    super();
    console.log(`create element ${this.name()}`);
  }

  connectedCallback() {
    console.log("Custom element added to page.", this.name());
  }

  disconnectedCallback() {
    console.log("Custom element removed from page.", this.name());
  }

  connectedMoveCallback() {
    console.log("Custom element moved with moveBefore()", this.name());
  }

  adoptedCallback() {
    console.log("Custom element moved to new page.", this.name());
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribute ${name} has changed.`, this.name());
  }
}

function createATLibsElementFrom(BaseClass, lib) {
  return class extends BaseClass {
    name() {
      return lib.name;
    }

    module() {
      return lib.module;
    }

    // emdash-style PluginContext backed by IndexedDB, shared by every element of this lib.
    get ctx() {
      return (lib.ctx ??= createPluginContext({ id: lib.name, storage: lib.storage }));
    }
  };
}


export async function initATLibs(customElementRegistry) {
  for (const lib of [
    {
      "name": "atlibs-statusphere",
      "module": {},
      "storage": { "sessions": { "indexes": ["userId", "did", "updatedAt"] } },
    }
  ]) {
    const elClass = createATLibsElementFrom(ATLibsElement, lib);
    customElementRegistry.define(lib.name, elClass);
  }
}