import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  css,
  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.TLetter;

  @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 var(--RIGHT-MARGIN) 10px var(--LEFT-MARGIN);
        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(
            100% / 4
          );
        grid-gap: 5px;
        border-top: 2px solid var(--footer-separator-bg-color, #e4002b);
      }

      .bottomstripe .pageNumber {
        position: absolute;
        top: 0px;
        right: var(--RIGHT-MARGIN);
        color: var(--footer-separator-fg-color, #ffffff);
        background: var(--footer-separator-bg-color, #e4002b);
        padding: 3px;
        font-size: 9px;
        color: #fff;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
      }

      .bottomstripe .documentTitle {
        position: absolute;
        top: -19px;
        right: var(--RIGHT-MARGIN);
        color: var(--label-fg);
        background: var(--label-bg);
        padding: 3px;
        font-size: 9px;
        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,
              "footer@@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>
        ${this.letterData.from.registrationDetails
          ? html` <div>
              <strong
                >${plugins.shared.translation.translate(
                  this.documentSettings.languageCode,
                  "footer@@registration.label"
                )}:</strong
              ><br />
              ${this.letterData.from.registrationDetails.registrationName}<br />
              <i>reg-#:</i> ${this.letterData.from.registrationDetails
                .registrationId}<br />
              <i>vat-id:</i> ${this.letterData.from.registrationDetails.vatId}
            </div>`
          : null}
        <div>
          <strong
            >${plugins.shared.translation.translate(
              this.documentSettings.languageCode,
              "contact@@title"
            )}:</strong
          ><br />
          <i
            >${plugins.shared.translation.translate(
              this.documentSettings.languageCode,
              "contact@@mail"
            )}:</i
          >
          ${this.letterData.from.email}<br />
          <i
            >${plugins.shared.translation.translate(
              this.documentSettings.languageCode,
              "contact@@phone"
            )}:</i
          >
          ${this.letterData.from.phone}<br />
          <i
            >${plugins.shared.translation.translate(
              this.documentSettings.languageCode,
              "contact@@fax"
            )}:</i
          >
          ${this.letterData.from.fax}
        </div>
        <div>
          <strong
            >${plugins.shared.translation.translate(
              this.documentSettings.languageCode,
              "bankConnection@@title"
            )}:</strong
          ><br />
          <i
            >${plugins.shared.translation.translate(
              this.documentSettings.languageCode,
              "bankConnection@@bank.accountHolder"
            )}:</i
          >
          ${this.letterData?.from?.name}<br />
          <i
            >${plugins.shared.translation.translate(
              this.documentSettings.languageCode,
              "bankConnection@@bank.institution"
            )}:</i
          >
          ${this.letterData?.from?.sepaConnection?.institution}<br />
          <i
            >${plugins.shared.translation.translate(
              this.documentSettings.languageCode,
              "bankConnection@@bank.iban"
            )}:</i
          >
          ${this.letterData?.from?.sepaConnection?.iban}<br />
          <i
            >${plugins.shared.translation.translate(
              this.documentSettings.languageCode,
              "bankConnection@@bank.bic"
            )}:</i
          >
          ${this.letterData?.from?.sepaConnection?.bic}<br />
        </div>
        <div class="documentTitle">
          <b>${this.letterData?.subject}</b>
        </div>
        <div class="pageNumber">
          ${plugins.shared.translation.translate(
            this.documentSettings.languageCode,
            "footer@@page"
          )}
          ${this.pageNumber}
          ${plugins.shared.translation.translate(
            this.documentSettings.languageCode,
            "footer@@pageOf"
          )}
          ${this.pageTotalNumber}
        </div>
      </div>
    `;
  }
}