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

  #templateHtml = `
    <style>
      div.overlay {
        position: fixed;
        margin: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        padding-top: 50px;
        justify-content: center;
        background: #0000001A 0% 0% no-repeat padding-box;
        opacity: 1; 
        transition: all 0.35s ease-in;
      }
      mainWindow {
        top: 25px;
        transition: all 0.35s ease-in;
      }
    </style>
    <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');
    console.log(this.overlay);
    this.mainWindow = this.shadowRoot.querySelector('main-window');
  }

  connectedCallback() {
    this.updateStyle();
  }

  attributeChangedCallback() {
    console.log("attributeChanged");
    this.updateStyle();
  }

  updateStyle() {
    console.log(this.getAttribute('active'), typeof this.getAttribute('active'));
    this.overlay.style.visibility = this.getAttribute('active') === "true" ? 'visible' : 'hidden';
  }
}

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