import { Component, Element, Event, h, Listen, Prop, getAssetPath } from '@stencil/core';
import { modifiersToClass } from '../../utils/utils';
export class IbkDropdownItem {
  constructor() {
    /** Se ocultará la opción de la lista */
    this.hide = false;
    /** Define si el item se mantendrá marcado al ser seleccionado */
    this._keepMarked = false;
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-dropdown-item', [
        { selected: this.selected && !this._keepMarked },
        { hide: this.hide },
        { preselected: this.preselected },
        { disabled: this.disabled }
      ]);
    };
    /** Selecciona el elemento y lo envía al componente padre "ibk-dropdown" */
    this.selectItem = () => {
      this.host.setAttribute('selected', '');
      const item = {
        value: this.value,
        label: this.label,
        cardType: this.cardType
      };
      this.onselect.emit(item);
    };
  }
  componentWillLoad() {
    const keepMarkedAttr = this.host.closest('ibk-dropdown').getAttribute('keep-marked');
    if (keepMarkedAttr != undefined) {
      this._keepMarked = true;
    }
  }
  setPreselected() {
    const parent = this.host.closest('ibk-dropdown');
    const preselected = parent.querySelector('ibk-dropdown-item[preselected]');
    if (preselected != null) {
      preselected.removeAttribute('preselected');
    }
    this.host.setAttribute('preselected', '');
  }
  deletePreselected() {
    this.host.removeAttribute('preselected');
  }
  render() {
    return (h("li", { class: this.containerClass(), "data-id": this.value, onClick: this.selectItem },
      this.cardType && h("img", { class: "ibk-dropdown-item__card-image", src: getAssetPath(`../assets/images/${this.cardType.toLowerCase()}.png`), alt: this.cardType }),
      h("span", { class: "ibk-dropdown-item__label", style: { color: this.color }, innerHTML: this.label })));
  }
  static get is() { return "ibk-dropdown-item"; }
  static get originalStyleUrls() { return {
    "$": ["dropdown-item.css"]
  }; }
  static get styleUrls() { return {
    "$": ["dropdown-item.css"]
  }; }
  static get properties() { return {
    "value": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "string | number",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Valor que se le asigna al elemento del dropdown"
      },
      "attribute": "value",
      "reflect": false
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Texto visible que tendr\u00E1 el elemento del dropdown"
      },
      "attribute": "label",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Evita que se el elemento sea seleccionable"
      },
      "attribute": "disabled",
      "reflect": false
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Asigna un color al texto del elemento"
      },
      "attribute": "color",
      "reflect": false
    },
    "selected": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Elemento seleccionado del dropdown"
      },
      "attribute": "selected",
      "reflect": false
    },
    "preselected": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Elemento actual al momento de hacer hover o mover las flechas"
      },
      "attribute": "preselected",
      "reflect": false
    },
    "cardType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'visa' | 'mastercard' | 'amex' | 'OTHER' | string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Dependiendo del tipo de tarjeta se agrega una imagen a la izquierda como referencia"
      },
      "attribute": "card-type",
      "reflect": false
    },
    "hide": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Se ocultar\u00E1 la opci\u00F3n de la lista"
      },
      "attribute": "hide",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get events() { return [{
      "method": "onselect",
      "name": "onselect",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Le env\u00EDa al componente \"ibk-dropdown\" el elemento seleccionado con sus propiedades"
      },
      "complexType": {
        "original": "DropdownItem",
        "resolved": "DropdownItem",
        "references": {
          "DropdownItem": {
            "location": "local"
          }
        }
      }
    }]; }
  static get elementRef() { return "host"; }
  static get listeners() { return [{
      "name": "mouseover",
      "method": "setPreselected",
      "target": undefined,
      "capture": false,
      "passive": true
    }, {
      "name": "mouseleave",
      "method": "deletePreselected",
      "target": undefined,
      "capture": false,
      "passive": true
    }]; }
}
