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

import * as plugins from "../plugins.js";
import { dedocumentSharedStyle } from "../style.js";

declare global {
  interface HTMLElementTagNameMap {
    "dedocument-pagecontent": DePageContent;
  }
}

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

  @property({
    type: Number,
  })
  public letterData: plugins.tsclass.business.ILetter;

  @property({
    type: Number,
  })
  public pageNumber: number = 1;

  @property({
    type: Number,
  })
  public pageTotalNumber: number = 1;

  @property({
    type: Object,
    reflect: true,
  })
  public documentSettings: plugins.shared.interfaces.IDocumentSettings;

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

  public static styles = [
    domtools.elementBasic.staticStyles,
    dedocumentSharedStyle,
    css`
      .content {
        position: absolute;

        left: var(--LEFT-MARGIN);
        right: var(--RIGHT-MARGIN);
        bottom: calc(var(--DPI-FACTOR) * 4);
        overflow: visible;
      }

      .content.page--first {
        top: calc(var(--DPI-FACTOR) * 9.85);
      }

      .content.page--notFirst {
        top: calc(var(--DPI-FACTOR) * 4.5);
      }

      .content .subject {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .content .text {
        text-align: left;
      }

      .subjectRepeated {
        position: relative;
        text-align: center;
        background: #eeeeee;
        color: #999;
        border-radius: 50px;
        padding: 5px 10px;
        margin: auto;
        margin-bottom: 10px;
        font-size: 10px;
      }
    `,
  ];

  public render(): TemplateResult {
    const firstPage = this.pageNumber === 1;
    return html`
      <div class="content ${firstPage ? "page--first" : "page--notFirst"}">
        ${firstPage
          ? html`<div class="subject">${this.letterData.subject}</div>`
          : null}
        <slot></slot>
      </div>
    `;
  }

  public firstUpdated(
    _changedProperties: Map<string | number | symbol, unknown>
  ): void {
    super.firstUpdated(_changedProperties);
    this.checkOverflow();
  }

  public async checkOverflow() {
    await this.elementDomReady;
    const contentContainer = this.shadowRoot.querySelector(".content");
    if (contentContainer.scrollHeight > contentContainer.clientHeight) {
      return true;
    } else {
      return false;
    }
  }
}