import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
import { h } from "@stencil/core";
import initI18n from '../../utils/i18n';
export class EzFileItem {
  constructor() {
    this.canRemove = true;
    this.fileName = undefined;
    this.iconName = undefined;
    this.fileSize = undefined;
    this.progress = 100;
  }
  observeProgress(newProgress) {
    if (newProgress < 0 || newProgress > 100) {
      throw new Error(this.i18n("ez-file-item.invalidProgress"));
    }
    this._element.style.setProperty("--ez-file-item--upload-progress", `${100 - newProgress}%`);
  }
  getFileSize() {
    if (!this.fileSize || this.fileSize === 0) {
      return "";
    }
    return `(${StringUtils.formatBytes(this.fileSize)})`;
  }
  getIconName() {
    let extension;
    if (this.iconName) {
      return this.iconName;
    }
    if (this.fileName.indexOf(".") > -1) {
      const index = this.fileName.lastIndexOf(".");
      extension = this.fileName.substring(index);
    }
    return FILE_TYPE_ICONS[extension] || DEFAULT_FILE_TYPE_ICON;
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  render() {
    this._element.title = `${this.fileName} ${this.getFileSize()}`;
    ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFileIcon');
    return (h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) }, h("div", { class: "content" }, h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }), h("label", { class: "file-name" }, this.fileName), h("label", { class: "file-size" }, this.getFileSize())), this.canRemove ? (h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("remove"), class: "btn-remove", size: "medium", "icon-name": "close", title: this.i18n("app.remove"), onClick: evt => {
        this.ezRemove.emit(this.fileName);
        evt.stopPropagation();
      } })) : undefined));
  }
  static get is() { return "ez-file-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-file-item.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-file-item.css"]
    };
  }
  static get properties() {
    return {
      "canRemove": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se o usu\u00E1rio pode remover o arquivo que est\u00E1 sendo apresentado."
        },
        "attribute": "can-remove",
        "reflect": false,
        "defaultValue": "true"
      },
      "fileName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o nome do arquivo, com extens\u00E3o."
        },
        "attribute": "file-name",
        "reflect": false
      },
      "iconName": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define qual \u00EDcone que representa o arquivo."
        },
        "attribute": "icon-name",
        "reflect": false
      },
      "fileSize": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Tamanho do arquivo (em bytes)."
        },
        "attribute": "file-size",
        "reflect": false
      },
      "progress": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Percentual de carregamento do arquivo para o servidor."
        },
        "attribute": "progress",
        "reflect": false,
        "defaultValue": "100"
      }
    };
  }
  static get events() {
    return [{
        "method": "ezClick",
        "name": "ezClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido ao clicar no ez-file-input (exceto no bot\u00E3o de remover)."
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "ezRemove",
        "name": "ezRemove",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido ao clicar no bot\u00E3o de remover."
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "_element"; }
  static get watchers() {
    return [{
        "propName": "progress",
        "methodName": "observeProgress"
      }];
  }
}
const FILE_TYPE_ICONS = {
  ".exe": "exe",
  ".gif": "gif",
  ".mp3": "mp3",
  ".mp4": "mp4",
  ".pdf": "pdf",
  ".png": "png",
  ".txt": "txt",
  ".zip": "zip",
  ".docx": "docx",
  ".xlsx": "xlsx",
  ".pptx": "pptx"
};
const DEFAULT_FILE_TYPE_ICON = "generic";
