import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  css,
  cssManager,
  unsafeCSS,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';

import * as shared from '../../ts/shared/index.js';

declare global {
  interface HTMLElementTagNameMap {
    'dedocument-pagecontainer': DePageContainer;
  }
}

@customElement('dedocument-pagecontainer')
export class DePageContainer extends DeesElement {
  public static demo = () => html`
    <dedocument-pagecontainer .format="${'a4'}"></dedocument-pagecontainer>
  `;

  @property({
    type: String,
  })
  public format: 'a4' = 'a4';

  @property({
    type: Boolean,
  })
  public printMode = false;

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public static styles = [
    domtools.elementBasic.staticStyles,
    css`
      :host {
        display: block;
        background: white;
        color: #333;
        padding: 0px;
        width: ${unsafeCSS(shared.a4Width + 'px')};
        height: ${unsafeCSS(shared.a4Height + 'px')};
        position: relative;
        border-radius: 3px;
        overflow: hidden;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style>
        :host {
          box-shadow: ${this.printMode ? `none` : `0px 0px 10px rgba(0,0,0,0.3)`};
        }
      </style>
      <slot></slot>
    `;
  }
}