---
const { title, layout = {} } = Astro.props;

const defaultLayout = {
  mobile:   { left: '2%', top: '5%', width: '96%', height: 'auto' },
  // tablet:   { left: '10%', top: '10%', width: '80%', height: 'auto' },
  desktop:  { left: '12%', top: '22%', width: '30%', height: 'auto' }
};

const mergedLayout = {
  mobile:   { ...defaultLayout.mobile, ...(layout.mobile || {}) },
  // tablet:   { ...defaultLayout.tablet, ...(layout.tablet || {}) },
  desktop:  { ...defaultLayout.desktop, ...(layout.desktop || {}) }
};
---

<div
    id={title}
    class="window"
    data-redirectUrl="test"
    style="display: none;"
>
    <div id={`${title}header`} class="title-bar">
        <div class="title-bar-text">{title}</div>
        <div class="title-bar-controls">
            <button class="close" aria-label="Minimize" style="background-color: silver;"></button>
            <button class="close" aria-label="Close" style="background-color: silver;"></button>
        </div>
    </div>
    <div class="window-body">
        <slot/>
    </div>
</div>

<style define:vars={{
  mobileLeft: mergedLayout.mobile.left,
  mobileTop: mergedLayout.mobile.top,
  mobileWidth: mergedLayout.mobile.width,
  mobileHeight: mergedLayout.mobile.height,

  desktopLeft: mergedLayout.desktop.left,
  desktopTop: mergedLayout.desktop.top,
  desktopWidth: mergedLayout.desktop.width,
  desktopHeight: mergedLayout.desktop.height
}}>

.title-bar-text {
    font-size: 14px;
}

.window {
  animation: createBox 0.15s;
  position: absolute;
}


.closed {
  animation: destroyBox 0.15s;
}

@keyframes createBox {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
@keyframes destroyBox {
  from { transform: scale(1); }
  to { transform: scale(0); }
}

/* Mobile */
@media (max-width: 510px) {
  .window {
    left: var(--mobileLeft);
    top: var(--mobileTop);
    max-width: var(--mobileWidth);
    max-height: var(--mobileHeight);
  }

  .window-body {
      height: var(--desktopHeight);
      max-height: calc(var(--desktopHeight) - 45px);
  }
}

/* Desktop */
@media (min-width: 511px) {
  .window {
    left: var(--desktopLeft);
    top: var(--desktopTop);

    /*width: var(--desktopWidth);*/
    max-width: var(--desktopWidth);

    /*height: calc(var(--desktopHeight));*/
    max-height: calc(var(--desktopHeight));
  }

  .window-body {
      height: var(--desktopHeight);
      max-height: calc(var(--desktopHeight) - 45px);

      width: var(--desktopWitdth);
      max-widtH: (var--desktopWidth);
  }

}
</style>