import { interpolate } from '../../utils/html.utils';
import Services from '../../services/service';
import type { Process } from 'pkg/sdk_client';
import { getCorrectDOM } from '~/utils/document.utils';

let currentPageStyle: HTMLStyleElement | null = null;

export async function initProcessElement(id: string, zone: string) {
  const processes = await getProcesses();
  const container = getCorrectDOM('process-4nk-component');
  // const currentProcess = processes.find((process) => process[0] === id)[1];
  // const currentProcess = {title: 'Hello', html: '', css: ''};
  // await loadPage({ processTitle: currentProcess.title, inputValue: 'Hello World !' });
  // const wrapper = document.querySelector('.process-container');
  // if (wrapper) {
  //   wrapper.innerHTML = interpolate(currentProcess.html, { processTitle: currentProcess.title, inputValue: 'Hello World !' });
  //   injectCss(currentProcess.css);
  // }
}

async function loadPage(data?: any) {
  const content = document.getElementById('containerId');
  if (content && data) {
    if (data) {
      content.innerHTML = interpolate(content.innerHTML, data);
    }
  }
}

function injectCss(cssContent: string) {
  removeCss(); // Ensure that the previous CSS is removed

  currentPageStyle = document.createElement('style');
  currentPageStyle.type = 'text/css';
  currentPageStyle.appendChild(document.createTextNode(cssContent));
  document.head.appendChild(currentPageStyle);
}

function removeCss() {
  if (currentPageStyle) {
    document.head.removeChild(currentPageStyle);
    currentPageStyle = null;
  }
}

async function getProcesses(): Promise<Record<string, Process>> {
  const service = await Services.getInstance();
  const processes = await service.getProcesses();
  return processes;
}