import { r as registerInstance, c as createEvent, h, H as Host } from './index-ecdfb761.js';
import { g as generateId } from './generate-79d455ce.js';

const dvnFileInputCss = "dvn-file-input{--width:inherit;--min-width:256px;--base-color:var(--color-primary);--border-color:var(--color-border);--margin:var(--spacing-unit) calc(1.5 * var(--spacing-unit));position:relative;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;margin:var(--margin);width:var(--width);min-width:var(--min-width);outline:none;color:var(--color-text);font-family:var(--font-family);border:1px solid var(--border-color);border-radius:var(--corner-radius);background-color:var(--color-input-background);vertical-align:top;font-size:var(--font-size);min-height:calc(var(--height) + var(--spacing-unit) * 2);padding:var(--padding);-webkit-appearance:none;}dvn-file-input.leaned{--margin:0}dvn-file-input.disabled{opacity:0.6;cursor:default}dvn-file-input.warning{--base-color:var(--color-warning);--border-color:var(--color-warning)}dvn-file-input.error{--base-color:var(--color-danger);--border-color:var(--color-danger)}dvn-file-input.small{--font-size:var(--font-size-small);--height:24px;--padding:calc(var(--spacing-unit) * 0.75) calc(1.5 * var(--spacing-unit))}dvn-file-input.medium{--font-size:var(--font-size-medium);--height:32px;--padding:var(--spacing-unit)}dvn-file-input.large{--font-size:var(--font-size-large);--height:40px;--padding:calc(1.5 * var(--spacing-unit)) calc(2.5 * var(--spacing-unit))}dvn-file-input.progressing.small{--padding:calc(var(--spacing-unit) * 0.75) calc(6 * var(--spacing-unit)) calc(var(--spacing-unit) * 0.75) calc(1.5 * var(--spacing-unit))}dvn-file-input.progressing.medium{--padding:var(--spacing-unit) calc(7 * var(--spacing-unit)) var(--spacing-unit) calc(2 * var(--spacing-unit))}dvn-file-input.progressing.large{--padding:calc(1.5 * var(--spacing-unit)) calc(8 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit)) calc(2.5 * var(--spacing-unit))}dvn-file-input .progress-container{position:absolute;right:calc(2 * var(--spacing-unit));top:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}dvn-file-input input{display:none}dvn-file-input textarea{height:unset;border-bottom-right-radius:3px}dvn-file-input input:disabled,dvn-file-input textarea:disabled{cursor:unset}dvn-file-input input:hover:enabled,dvn-file-input textarea:hover:enabled{border-color:var(--base-color)}dvn-file-input input:focus:enabled,dvn-file-input textarea:focus:enabled{border-color:var(--base-color);-webkit-box-shadow:0px 0px 0px 1px var(--base-color);box-shadow:0px 0px 0px 1px var(--base-color)}dvn-file-input input::-webkit-input-placeholder,dvn-file-input textarea::-webkit-input-placeholder{color:var(--color-text-secondary)}dvn-file-input input::-moz-placeholder,dvn-file-input textarea::-moz-placeholder{color:var(--color-text-secondary)}dvn-file-input input:-ms-input-placeholder,dvn-file-input textarea:-ms-input-placeholder{color:var(--color-text-secondary)}dvn-file-input input::-ms-input-placeholder,dvn-file-input textarea::-ms-input-placeholder{color:var(--color-text-secondary)}dvn-file-input input::placeholder,dvn-file-input textarea::placeholder{color:var(--color-text-secondary)}dvn-file-input.with-multiple-values .file-container{margin-bottom:var(--spacing-unit)}dvn-file-input .placeholder{cursor:pointer;color:var(--color-text-secondary)}dvn-file-input .placeholder dvn-icon-button{margin-right:var(--spacing-unit)}dvn-file-input .file-container{min-height:var(--height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:var(--corner-radius);position:relative}dvn-file-input .file-container:hover{background:var(--color-background-secondary)}dvn-file-input .file-container:hover .delete-button-container{display:block}dvn-file-input .file-container .icon-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:var(--height);width:var(--height);border-radius:var(--corner-radius);background:var(--color-neutral-lightest);margin-right:var(--spacing-unit)}dvn-file-input .file-container .delete-button-container{position:absolute;right:0;display:none}";

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';
  }
}
const DvnFileInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.change = createEvent(this, "change", 7);
    this.blur = createEvent(this, "blur", 7);
    this.focusEvent = createEvent(this, "focus", 7);
    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;
      } })));
  }
};
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);
}
DvnFileInput.style = dvnFileInputCss;

export { DvnFileInput as dvn_file_input };
