import { SignatureElement } from './signature';
import signatureCss from '../../../style/signature.css?raw'
import Services from '../../services/service.js'

class SignatureComponent extends HTMLElement {
    _callback: any
    signatureElement: SignatureElement | null = null;

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

        this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null;
    }

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

        if (!customElements.get('signature-element')) {
            customElements.define('signature-element', SignatureElement);
        }
    }

    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) {
            const signatureElement = document.createElement('signature-element');
            this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`;
            this.shadowRoot.appendChild(signatureElement);
        }
    }
}

export { SignatureComponent }
customElements.define('signature-component', SignatureComponent);