import { ChatElement } from './chat';
import chatCss from '../../../public/style/chat.css?raw';
import Services from '../../services/service.js';

class ChatComponent extends HTMLElement {
  _callback: any;
  chatElement: ChatElement | null = null;

  constructor() {
    super();
    console.log('INIT');
    this.attachShadow({ mode: 'open' });

    this.chatElement = this.shadowRoot?.querySelector('chat-element') || null;
  }

  connectedCallback() {
    console.log('CALLBACKs');
    this.render();
    this.fetchData();

    if (!customElements.get('chat-element')) {
      customElements.define('chat-element', ChatElement);
    }
  }

  async fetchData() {
    if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
      const data = await (window as any).myService?.getProcesses();
    } else {
      const service = await Services.getInstance();
      const data = await service.getProcesses();
    }
  }

  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) {
      // Créer l'élément chat-element
      const chatElement = document.createElement('chat-element');
      this.shadowRoot.innerHTML = `<style>${chatCss}</style>`;
      this.shadowRoot.appendChild(chatElement);
    }
  }
}

export { ChatComponent };
customElements.define('chat-component', ChatComponent);