import { Component, Element, h, Prop, Watch } from "@stencil/core";
import { modifiersToClass } from '../../utils/utils';
export class IbkDrawer {
  constructor() {
    /** Determina la posición en donde se abrirá el contenido del drawer */
    this.position = 'right';
    /** Determina si el drawer se encuentra visible o no */
    this.show = false;
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-drawer', [
        `open-${this.position}`,
        { container: this.container != undefined }
      ]);
    };
    this.getContainerLimits = () => {
      if (this.container != null) {
        let limits = {};
        const element = document.querySelector(this.container);
        const top = element.offsetTop;
        const left = element.offsetLeft;
        const bottom = window.innerHeight - (top + element.clientHeight);
        const right = window.innerWidth - (left + element.clientWidth);
        const height = element.clientHeight;
        const width = element.clientWidth;
        if (this.position == 'right') {
          limits.top = top + 'px';
          limits.right = right + 'px';
        }
        else if (this.position == 'bottom') {
          limits.bottom = bottom + 'px';
          limits.left = left + 'px';
        }
        else if (this.position == 'left') {
          limits.top = top + 'px';
          limits.left = left + 'px';
        }
        else if (this.position == 'top') {
          limits.top = top + 'px';
          limits.left = left + 'px';
        }
        limits.width = width + 'px';
        limits.height = height + 'px';
        return limits;
      }
    };
    /** Cierra el drawer al dar click sobre el fondo o el botón cerrar */
    this.hideDrawer = (e) => {
      const t = e.target;
      const content = t.closest('.ibk-drawer__content');
      if (content == null) {
        this.host.removeAttribute('show');
      }
    };
  }
  onShowChange(show) {
    const mask = this.host.querySelector('.ibk-drawer');
    const content = this.host.querySelector('.ibk-drawer__content');
    if (show) {
      mask.style.display = 'block';
      setTimeout(() => mask.style.opacity = '1', 10);
      setTimeout(() => {
        if (this.position == 'right') {
          content.style.right = '0';
        }
        else if (this.position == 'left') {
          content.style.left = '0';
        }
        else if (this.position == 'bottom') {
          content.style.bottom = '0';
        }
        else if (this.position == 'top') {
          content.style.top = '0';
        }
      }, 250);
    }
    else {
      if (this.position == 'right') {
        content.style.right = '-100%';
      }
      else if (this.position == 'left') {
        content.style.left = '-100%';
      }
      else if (this.position == 'bottom') {
        content.style.bottom = '-100%';
      }
      else if (this.position == 'top') {
        content.style.top = '-100%';
      }
      setTimeout(() => mask.style.opacity = '0', 250);
      setTimeout(() => mask.style.display = 'none', 500);
    }
  }
  render() {
    return (h("div", { class: this.containerClass(), onClick: this.hideDrawer, style: this.getContainerLimits() },
      h("div", { class: "ibk-drawer__content", style: { backgroundColor: this.backgroundColor } },
        h("button", { onClick: () => this.host.removeAttribute('show'), type: "button", class: "ibk-drawer__close icon-m-close" }),
        h("slot", null))));
  }
  static get is() { return "ibk-drawer"; }
  static get originalStyleUrls() { return {
    "$": ["drawer.css"]
  }; }
  static get styleUrls() { return {
    "$": ["drawer.css"]
  }; }
  static get properties() { return {
    "position": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'top' | 'right' | 'bottom' | 'left'",
        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina la posici\u00F3n en donde se abrir\u00E1 el contenido del drawer"
      },
      "attribute": "position",
      "reflect": false,
      "defaultValue": "'right'"
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Define el color del fondo del drawer"
      },
      "attribute": "background-color",
      "reflect": false
    },
    "show": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Determina si el drawer se encuentra visible o no"
      },
      "attribute": "show",
      "reflect": false,
      "defaultValue": "false"
    },
    "container": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "El tama\u00F1o del drawer se limitar\u00E1 al contenedor especificado, por defecto es el ancho y alto disponible, dependiendo de la posici\u00F3n en que se visualice.<br>\r\nLa propiedad recibe un selector del elemento"
      },
      "attribute": "container",
      "reflect": false
    }
  }; }
  static get elementRef() { return "host"; }
  static get watchers() { return [{
      "propName": "show",
      "methodName": "onShowChange"
    }]; }
}
