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 './shared/index.js';
import * as tsclass from '@tsclass/tsclass';

declare global {
  interface HTMLElementTagNameMap {
    'dedocument-letterheader': DeLetterHeader;
  }
}

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

  @property({
    type: Object,
    reflect: true
  })
  public letterData: tsclass.business.ILetter;

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

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

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

  public static styles = [
    domtools.elementBasic.staticStyles,
    css`
      :host {
        color: #333;
      }

      .recepientInfo {
        position: absolute;
        display: block;
        overflow: hidden;
        top: 200px;
        right: ${unsafeCSS(shared.rightMargin + 'px')};
        width: 200px;
        text-align: right;
      }
      .recepientInfo .label {
        margin-top: 10px;
        margin-bottom: 3px;
        font-size: 10px;
        font-weight: bold;
      }

      .date {
        position: absolute;
        top: 180px;
        right: ${unsafeCSS(shared.rightMargin + 'px')};
        text-align: right;
      }

      .address {
        position: absolute;
        top: 180px;
        left: ${unsafeCSS(shared.leftMargin + 'px')};
      }

      .address .from {
        font-size: 10px;
      }

      .address .to {
        margin-top: 10px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="date">
        ${new Date(this.letterData.date).getDate()}. ${new Date(this.letterData.date).toLocaleString('default', { month: 'long' })}
        ${new Date(this.letterData.date).getFullYear()}
      </div>
      <div class="address">
        <div class="from">
          ${this.letterData.from.name}, ${this.letterData.from.address.streetName}
          ${this.letterData.from.address.houseNumber}, ${this.letterData.from.address.postalCode}
          ${this.letterData.from.address.city}, ${this.letterData.from.address.country}
        </div>
        <div class="to">
          ${this.letterData.to.name}<br />
          ${this.letterData.to.address.streetName} ${this.letterData.to.address.houseNumber}<br />
          ${this.letterData.to.address.postalCode} ${this.letterData.to.address.city}<br />
          ${this.letterData.from.address.country}
        </div>
      </div>
      <div class="recepientInfo">
        <div class="label">your customer id:</div>
        ${this.letterData.to.customerNumber || 'not registered'}

        <div class="label">your vat id on file:</div>
        ${this.letterData.to.vatId || 'not provided'}
      </div>
    `;
  }
}