import processHtml from './process.html?raw';
import processScript from './process.ts?raw';
import processCss from '../../4nk.css?raw';
import { init } from './process';

export class ProcessListComponent extends HTMLElement {
  _callback: any;
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    console.log('CALLBACK PROCESS LIST PAGE');
    this.render();
    setTimeout(() => {
      init();
    }, 500);
  }

  set callback(fn) {
    if (typeof fn === 'function') {
      this._callback = fn;
    } else {
      console.error('Callback is not a function');
    }
  }

  get callback() {
    return this._callback;
  }

  render() {
    if (this.shadowRoot)
      this.shadowRoot.innerHTML = `
            <style>
            ${processCss}
            </style>${processHtml}
            <script type="module">
            ${processScript}
            </scipt>
            
        `;
  }
}

if (!customElements.get('process-list-4nk-component')) {
  customElements.define('process-list-4nk-component', ProcessListComponent);
}