import "../sass/app.scss";
import Account from "./svelte/Account.svelte";
import Channel from "./svelte/Channel.svelte";
// import Mustache from "mustache";

// Mustache.escape = function (value) {
//   return value;
// };

// Define all components
const entryComponents = {
  account: Account,
  channel: Channel,
};

let loadedComponents = [];

let loadSvelte = function () {
  loadedComponents.map((comp) => comp.$destroy());
  loadedComponents = [];

  const elements = document.body.querySelectorAll(".lucent-component");
  if (elements.length === 0) {
    return;
  }
  const loadElement = function (element) {
    const componentId = element.attributes["data-layout"].value;
    const [_, component] = Object.entries(entryComponents).find(
      ([key, _]) => componentId === key,
    );
    if (!component) {
      return [];
    }

    const jsonData = document.getElementById("json-" + componentId).innerHTML;
    const props = JSON.parse(jsonData);
    const compOptions = {
      target: element,
      props: props,
    };

    loadedComponents = [...loadedComponents, new component(compOptions)];
  };
  Array.from(elements).map(loadElement);
};

// document.addEventListener("turbo:load", loadSvelte);
document.addEventListener("DOMContentLoaded", loadSvelte);