import { effect, computed, ReadonlySignal } from "@preact/signals-core";

export type Style = CSSStyleSheet | string;

export abstract class SignalsWebComponent extends HTMLElement {
  abstract builder: ReadonlySignal<string | HTMLElement>;

  styles: ReadonlySignal<Style | Array<Style>> = computed(() => []);
  shouldRenderInShadowRoot = true;

  cleanup: (() => void)[] = [];

  connectedCallback() {
    let root = this.shouldRenderInShadowRoot ? this.shadowRoot : this;
    if (this.shouldRenderInShadowRoot && !root) {
      root = this.attachShadow({ mode: "open" });
    }
    this.cleanup.push(
      effect(() => {
        const value = this.builder.value;
        if (typeof value === "string") {
          root!.innerHTML = value;
        } else if (value instanceof HTMLTemplateElement) {
          const node = value.content.cloneNode(true);
          root!.innerHTML = "";
          root!.appendChild(node);
        } else if (value instanceof HTMLElement) {
          root!.innerHTML = "";
          root!.appendChild(value);
        }
      })
    );
    this.cleanup.push(
      effect(() => {
        const value = this.styles.value;
        const styles: CSSStyleSheet[] = [];
        const array = Array.isArray(value) ? value : [value];
        for (const style of array) {
          if (style instanceof CSSStyleSheet) {
            styles.push(style);
          } else {
            const sheet = new CSSStyleSheet();
            sheet.replaceSync(style);
            styles.push(sheet);
          }
        }
        if (root instanceof ShadowRoot) {
          root.adoptedStyleSheets = styles;
        } else {
          document.adoptedStyleSheets = styles;
        }
      })
    );
  }

  disconnectedCallback() {
    this.cleanup.forEach((cleanup) => cleanup());
  }
}

export function isSignal(value: any): value is ReadonlySignal<any> {
  return (
    value &&
    typeof value === "object" &&
    "brand" in value &&
    value.brand === Symbol.for("preact-signals")
  );
}