import loginHtml from './home.html?raw';
import loginScript from './home.ts?raw';
import loginCss from '../../4nk.css?raw';
import { initHomePage } from './home';
import { secureLogger } from '../../services/secure-logger';

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

  connectedCallback() {
    secureLogger.info('Login component connected', { component: 'LoginComponent' });
    this.render();
    setTimeout(() => {
      initHomePage();
    }, 500);
  }

  set callback(fn) {
    if (typeof fn === 'function') {
      this._callback = fn;
    } else {
      secureLogger.error('Callback is not a function', { component: 'LoginComponent' });
    }
  }

  get callback() {
    return this._callback;
  }

  render() {
    if (this.shadowRoot)
      {this.shadowRoot.innerHTML = `
            <style>
            ${loginCss}
            </style>${loginHtml}
            <script type="module">
            ${loginScript}
            </scipt>

        `;}
  }
}

if (!customElements.get('login-4nk-component')) {
  customElements.define('login-4nk-component', LoginComponent);
}