import { Component, Event, h, Host, Method, Prop } from '@stencil/core';
import { generateId } from '@dvn/core/util/generate';
function getFileClass(name) {
  if (!name) {
    return 'file';
  }
  const extension = name.substring(name.lastIndexOf('.') + 1, name.length).toLowerCase();
  switch (extension) {
    case 'mp4':
    case 'mpg':
    case 'mpeg':
    case 'mov':
      return 'video';
    case 'pdf':
    case 'heic':
    case 'png':
    case 'jpg':
    case 'jpeg':
    case 'gif':
    case 'svg':
    case 'webp':
      return 'image';
    case 'txt':
    case 'doc':
    case 'docx':
    case 'odt':
      return 'text';
    case 'xls':
    case 'xlsx':
    case 'ods':
    case 'csv':
      return 'spreadsheet';
    case 'ppt':
    case 'pptx':
      return 'presentation';
    case 'zip':
    case 'rar':
      return 'compressed';
    case 'json':
    case 'js':
    case 'css':
    case 'html':
    case 'htm':
      return 'code';
    case 'md':
      return 'markdown';
  }
  return 'file';
}
function getFileIcon(fileClass) {
  switch (fileClass) {
    case 'image':
      return 'uil uil-image';
    case 'video':
      return 'uil uil-video';
    case 'text':
      return 'uil uil-file-alt';
    case 'spreadsheet':
      return 'uil uil-table';
    case 'presentation':
      return 'uil uil-presentation-play';
    case 'compressed':
      return 'uil uil-compress-v';
    case 'code':
      return 'uil uil-arrow';
    case 'markdown':
      return 'uil uil-document-layout-left';
    case 'file':
    default:
      return 'uil uil-file';
  }
}
export class DvnFileInput {
  constructor() {
    this.leaned = false;
    this.scale = 'medium';
    this.disabled = false;
    this.progressing = false;
    this.readonly = false;
    this.autoComplete = 'on';
    this.long = false;
    this.overrideStyle = {};
    this.multiple = false;
    this.renderFile = (file) => {
      const fileClass = getFileClass(file.name);
      return (h("div", { class: "file-container" },
        h("div", { class: "delete-button-container" },
          h("dvn-icon-button", { iconName: "uil uil-trash-alt", view: "flat", leaned: true, onClick: () => this.removeFile(file.name) })),
        h("div", { class: "icon-container" },
          h("dvn-icon", { iconName: getFileIcon(fileClass) })),
        file.name));
    };
    this.removeFile = (fileName) => {
      if (Array.isArray(this.value)) {
        const files = this.value.filter(file => file.name !== fileName);
        this.change.emit(files);
      }
      else {
        this.change.emit();
      }
    };
  }
  focus() {
    this.textInput.focus();
  }
  componentWillLoad() {
    this.id = generateId();
  }
  render() {
    const { disabled, feedback, leaned, multiple, id, placeholder, progressing, scale, value, } = this;
    const vars = this.overrideStyle || {};
    if (this.width) {
      vars['--width'] = this.width;
      vars['--min-width'] = this.width;
    }
    return (h(Host, { class: {
        leaned: leaned,
        [scale]: true,
        [feedback]: !!feedback,
        progressing: progressing,
        disabled: disabled,
        'with-multiple-values': multiple && Array.isArray(value) && value.length > 0
      }, style: vars },
      value && (Array.isArray(value) ? value.map(this.renderFile) : this.renderFile(value)),
      h("label", { htmlFor: id, class: "custom-file-upload" }, (!value || multiple) && h("div", { class: "placeholder" },
        h("dvn-icon-button", { iconName: "uil uil-plus", view: "ghost", leaned: true, tagMode: true }),
        placeholder)),
      h("input", { id: id, type: "file", value: null, multiple: multiple, disabled: disabled, onFocus: (e) => {
          e.stopPropagation();
          this.focusEvent.emit(e);
        }, onBlur: (e) => {
          e.stopPropagation();
          this.blur.emit(e);
        }, onChange: async (e) => {
          e.stopPropagation();
          const files = await readFiles(e.target.files);
          if (this.multiple) {
            this.change.emit([...(this.value || []), ...files]);
          }
          else {
            this.change.emit(files.at(0));
          }
          e.target.value = null;
        } })));
  }
  static get is() { return "dvn-file-input"; }
  static get originalStyleUrls() { return {
    "$": ["dvn-file-input.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-file-input.css"]
  }; }
  static get properties() { return {
    "leaned": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "leaned",
      "reflect": false,
      "defaultValue": "false"
    },
    "scale": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Scale",
        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
        "references": {
          "Scale": {
            "location": "import",
            "path": "../../theme"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scale",
      "reflect": false,
      "defaultValue": "'medium'"
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "name",
      "reflect": false
    },
    "feedback": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'error' | 'warning'",
        "resolved": "\"error\" | \"warning\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "feedback",
      "reflect": false
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "placeholder",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "progressing": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "progressing",
      "reflect": false,
      "defaultValue": "false"
    },
    "value": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "FileData | FileData[]",
        "resolved": "FileData | FileData[]",
        "references": {
          "FileData": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "width",
      "reflect": false
    },
    "readonly": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "readonly",
      "reflect": false,
      "defaultValue": "false"
    },
    "autoComplete": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'on' | 'off'",
        "resolved": "\"off\" | \"on\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "auto-complete",
      "reflect": false,
      "defaultValue": "'on'"
    },
    "long": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "long",
      "reflect": false,
      "defaultValue": "false"
    },
    "overrideStyle": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "override-style",
      "reflect": false,
      "defaultValue": "{}"
    },
    "multiple": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "multiple",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get events() { return [{
      "method": "change",
      "name": "change",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "blur",
      "name": "blur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "focusEvent",
      "name": "focus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "focus": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {},
        "return": "Promise<void>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
}
async function readFiles(files) {
  const promises = [];
  for (let i = 0; i < files.length; i++) {
    promises.push(new Promise((resolve, reject) => {
      const file = files.item(i);
      const { name, type } = file;
      const reader = new FileReader();
      reader.readAsText(file);
      reader.onload = function (evt) {
        resolve({
          name,
          type,
          content: evt.target.result,
          raw: file,
        });
      };
      reader.onerror = e => reject(e);
    }));
  }
  return Promise.all(promises);
}
