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-pagefooter': DePageFooter;
  }
}

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

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

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

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

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

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

  public static styles = [
    domtools.elementBasic.staticStyles,
    dedocumentSharedStyle,
    css`
      :host {
        color: #333;
      }
      .bottomstripe {
        position: absolute;
        display: grid;
        font-size: 11px;
        overflow: visible;
        bottom: 0px;
        left: 0px;
        right: 0px;
        height: 130px;
        content: '';
        padding: 30px ${unsafeCSS(plugins.shared.rightMargin + 'px')} 10px ${unsafeCSS(plugins.shared.leftMargin + 'px')};
        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
        grid-gap: 5px;
        border-top: 2px solid #e4002b;
      }

      .bottomstripe .pageNumber {
        position: absolute;
        top: 0px;
        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
        background: #e4002b;
        padding: 3px;
        font-size: 9px;
        color: #fff;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
      }
      .bottomstripe .documentTitle {
        position: absolute;
        top: -18px;
        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
        background: #dddddd;
        padding: 3px;
        font-size: 9px;
        color: #333;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="bottomstripe">
        <div>
          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
          ${this.letterData.from.name}<br />
          ${this.letterData.from.address.streetName} ${this.letterData.from.address.houseNumber}<br />
          ${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
          ${this.letterData.from.address.country}
        </div>
        <div>
          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
          Amtsgericht Bremen<br />
          <i>reg-#:</i> HRB 35230 HB<br />
          <i>vat-id:</i> ${this.letterData.from.vatId}
        </div>
        <div>
          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
          <i>email:</i> ${this.letterData.from.email}<br />
          <i>phone:</i> ${this.letterData.from.phone}<br />
          <i>fax:</i> ${this.letterData.from.fax}
        </div>
        <div>
          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
          <i>beneficiary:</i> ${this.letterData?.from?.name}<br />
          <i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
          <i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />
          <i>bic:</i> ${this.letterData?.from?.sepaConnection?.bic}<br />
        </div>
        <div class="documentTitle">Subject: <b>${this.letterData?.subject}</b>${(() => {
          const uidString = html`/ Document-UID: <b>${html`<a href="https://uid.signature.digital/">https://uid.signature.digital/</a>`}</b>`;
          return ``;
        })()}</div>
        <div class="pageNumber">page ${this.pageNumber} of ${this.pageTotalNumber}</div>
      </div>
    `;
  }
}