import Services from '../../services/service';

let currentPageStyle: HTMLStyleElement | null = null;

export async function initProcessElement(id: string, zone: string) {
  const processes = await getProcesses();
  const currentProcess = processes.find((process) => process[0] === id)[1];
  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);
  }
}

function interpolate(template: string, data: { [key: string]: string }) {
  return template.replace(/{{(.*?)}}/g, (_, key) => data[key.trim()]);
}

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<any[]> {
  const service = await Services.getInstance();
  const processes = await service.getProcesses();
  return processes;
}