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 plugins from "../plugins.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;
        padding: 0px;
        width: ${unsafeCSS(plugins.shared.A4_WIDTH + "px")};
        height: ${unsafeCSS(plugins.shared.A4_HEIGHT + "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>
    `;
  }
}