import * as Turbo from "@hotwired/turbo";
// import "../sass/app.scss";
import { mount, unmount } from "svelte";
import "../css/app.css";
import Register from "./svelte/account/Register.svelte";
import LoginEntry from "./entry/LoginEntry/LoginEntry.svelte";
import VerifyEntry from "./entry/VerifyEntry/VerifyEntry.svelte";
import Profile from "./svelte/account/Profile.svelte";
import SetupIndex from "./svelte/setup/Index.svelte";
import Members from "./svelte/members/Members.svelte";
import RecordNotFound from "./svelte/records/NotFound.svelte";
import RecordEdit from "./svelte/records/Edit.svelte";
import ContentIndex from "./svelte/content/Index.svelte";
import HomeEntry from "./entry/HomeEntry/HomeEntry.svelte";
import SchemaEntry from "./entry/SchemaEntry/SchemaEntry.svelte";
import FieldCreateEntry from "./entry/FieldCreateEntry/FieldCreateEntry.svelte";
import FieldEditEntry from "./entry/FieldEditEntry/FieldEditEntry.svelte";
import SchemaEditEntry from "./entry/SchemaEditEntry/SchemaEditEntry.svelte";
import BuildReport from "./svelte/build/Report.svelte";
import { createApp } from "./app";

const entryComponents = {
  members: Members,
  recordEdit: RecordEdit,
  recordNotFound: RecordNotFound,
  contentIndex: ContentIndex,
  homeIndex: HomeEntry,
  buildReport: BuildReport,
  register: Register,
  login: LoginEntry,
  verify: VerifyEntry,
  profile: Profile,
  setup: SetupIndex,
  schemas: SchemaEntry,
  fieldCreate: FieldCreateEntry,
  fieldEdit: FieldEditEntry,
  schemaEdit: SchemaEditEntry,
};
Turbo.start();

let loadedComponents = [];

let loadSvelte = function () {
  Turbo.cache.clear();
  loadedComponents.map((comp) => unmount(comp));
  loadedComponents = [];

  const elements = document.body.querySelectorAll(".lucent-component");
  if (elements.length === 0) {
    return;
  }
  const loadElement = function (element) {
    const jsonData = document.getElementById("json-data").innerHTML;

    const props = JSON.parse(jsonData);
    const [__, view] = Object.entries(entryComponents).find(
      ([key, _]) => props.view === key,
    );

    if (!view) {
      return [];
    }
    // props.axios = axiosInstance;
    createApp(props.channel);
    const compOptions = {
      target: element,
      props: props,
    };
    loadedComponents = [...loadedComponents, mount(view, compOptions)];
  };
  Array.from(elements).map(loadElement);
};
document.addEventListener("turbo:load", loadSvelte);