import { ElementIDUtils } from "@sankhyalabs/core";
import { h, Host } from "@stencil/core";
import { Sizes } from "./enum/sizes";
export class EzBadge {
  constructor() {
    this._sizes = {
      [Sizes.EXTRA_LARGE]: {
        sufix: "xl",
      },
      [Sizes.LARGE]: {
        sufix: "lg",
      },
      [Sizes.MEDIUM]: {
        sufix: "md",
      },
      [Sizes.SMALL_MEDIUM]: {
        sufix: "sm",
      },
      [Sizes.SMALL]: {
        sufix: "xs",
      },
      [Sizes.EXTRA_SMALL]: {
        sufix: "2xs",
      },
    };
    this.hasSlot = false;
    this.size = "small";
    this.label = undefined;
    this.iconLeft = undefined;
    this.iconRight = undefined;
    this.position = { horizontal: "right", vertical: "top" };
    this.alignItems = "center";
  }
  getIconSize() {
    switch (this.size) {
      case "large":
        return "large";
      case "medium":
      case "small-medium":
        return "small";
      case "small":
        return "x-small";
      default:
        return null;
    }
  }
  getAlignItemsClass() {
    switch (this.alignItems) {
      case "flex-end":
        return "end";
      case "flex-start":
        return "start";
      default:
        return "center";
    }
  }
  componentDidLoad() {
    if (this._element) {
      ElementIDUtils.addIDInfo(this._element);
    }
    if (this._badge) {
      const dataInfo = { id: 'embedded' };
      ElementIDUtils.addIDInfo(this._badge, 'ezBadge', dataInfo);
    }
  }
  handleSlotChange() {
    this.hasSlot = true;
  }
  validateIconLeft() {
    return (this.iconLeft) && this.iconLeft.trim() !== "";
  }
  validateIconRight() {
    return (this.iconRight) && this.iconRight.trim() !== "";
  }
  validateLabel() {
    return (this.label) && this.label.trim() !== "";
  }
  createContainerClassName() {
    let sizeSufix = this._sizes[this.size].sufix;
    let alignItemsClass = "badge__content--icon-align-" + this.getAlignItemsClass();
    let containerClassNames = ["badge__content", alignItemsClass];
    if (this.hasSlot) {
      containerClassNames.push("badge__content--fill-" + sizeSufix);
      if (this.position.vertical == "bottom" && this.position.horizontal == "right") {
        containerClassNames.push("badge__content--fill-bottom-right");
      }
      if (this.position.vertical == "bottom" && this.position.horizontal == "left") {
        containerClassNames.push("badge__content--fill-bottom-left");
      }
      if (this.position.vertical == "top" && this.position.horizontal == "right") {
        containerClassNames.push("badge__content--fill-top-right");
      }
      if (this.position.vertical == "top" && this.position.horizontal == "left") {
        containerClassNames.push("badge__content--fill-top-left");
      }
    }
    if (this.label) {
      containerClassNames.push("badge__content--text-" + sizeSufix);
    }
    else if (this.iconLeft || this.iconRight) {
      containerClassNames.push("badge__content--icon-" + sizeSufix);
    }
    else {
      containerClassNames.push("badge__content--fill-" + sizeSufix);
    }
    return containerClassNames.join(" ");
  }
  render() {
    return (h(Host, null, h("div", { class: "badge" }, h("div", null, h("slot", { name: "child-badge", onSlotchange: () => { this.handleSlotChange(); } })), h("div", { class: this.createContainerClassName(), ref: (el) => this._badge = el }, this.validateIconLeft() && h("ez-icon", { class: "icon", iconName: this.iconLeft, size: this.getIconSize() }), this.validateLabel() && h("label", { title: this.label }, this.label), this.validateIconRight() && h("ez-icon", { class: "icon", iconName: this.iconRight, size: this.getIconSize() })))));
  }
  static get is() { return "ez-badge"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-badge.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-badge.css"]
    };
  }
  static get properties() {
    return {
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "\"extra-large\" | \"large\" | \"medium\" | \"small-medium\" | \"small\" | \"extra-small\"",
          "resolved": "\"extra-large\" | \"extra-small\" | \"large\" | \"medium\" | \"small\" | \"small-medium\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tamanho de acordo com o tipo utilizado pelo componente."
        },
        "attribute": "size",
        "reflect": true,
        "defaultValue": "\"small\""
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o conte\u00FAdo textual ou num\u00E9rico do componente."
        },
        "attribute": "label",
        "reflect": true
      },
      "iconLeft": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o \u00EDcone a ser usado no lado esquerdo do badge: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
        },
        "attribute": "icon-left",
        "reflect": true
      },
      "iconRight": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o \u00EDcone a ser usado no lado direito do badge: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html)"
        },
        "attribute": "icon-right",
        "reflect": true
      },
      "position": {
        "type": "unknown",
        "mutable": true,
        "complexType": {
          "original": "IPosition",
          "resolved": "IPosition",
          "references": {
            "IPosition": {
              "location": "import",
              "path": "./interfaces/IPosition"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define a posi\u00E7\u00E3o do \u00EDcone em rela\u00E7\u00E3o ao elemento filho."
        },
        "defaultValue": "{ horizontal: \"right\", vertical: \"top\" }"
      },
      "alignItems": {
        "type": "string",
        "mutable": true,
        "complexType": {
          "original": "\"center\" | \"flex-end\" | \"flex-start\"",
          "resolved": "\"center\" | \"flex-end\" | \"flex-start\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define a posi\u00E7\u00E3o do \u00EDcone em rela\u00E7\u00E3o ao elemento."
        },
        "attribute": "align-items",
        "reflect": true,
        "defaultValue": "\"center\""
      }
    };
  }
  static get states() {
    return {
      "hasSlot": {}
    };
  }
  static get elementRef() { return "_element"; }
}
