class CustomModal extends HTMLElement {
  static observedAttributes = ['active'];

  #templateHtml = `
    <div class="overlay">
      <main-window width="700px" gap="25px">
        <slot></slot>
      </main-window>
    </div>
  `;

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

    const template = document.createElement('template')
    template.innerHTML = this.#templateHtml;
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.overlay = this.shadowRoot.querySelector('div.overlay');
    this.mainWindow = this.shadowRoot.querySelector('main-window');
  }

  connectedCallback() {
    this.updateStyle();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) return;

    switch (name) {
      case 'active':
        this.overlay.style.visibility = newValue === "true" ? 'visible' : 'hidden';
        break;
      default:
        console.error(`Unhandled attribute change: ${name}`);
    }
  }

  updateStyle() {
        this.overlay.style.position = 'fixed';
        this.overlay.style.margin = '0';
        this.overlay.style.top = '0';
        this.overlay.style.left = '0';
        this.overlay.style.right = '0';
        this.overlay.style.bottom = '0';
        this.overlay.style.display = 'flex';
        this.overlay.style.paddingTop = '50px';
        this.overlay.style.justifyContent = 'center';
        this.overlay.style.background = '#0000001A 0% 0% no-repeat padding-box';
        this.overlay.style.opacity = '1'; 
        this.overlay.style.transition = 'all 0.35s ease-in';
        this.mainWindow.style.top = '25px';
  }
}

customElements.define('custom-modal', CustomModal);