import { h, getAssetPath } from '@stencil/core';
export class EclInput {
  constructor() {
    this.theme = 'ec';
    this.styleClass = undefined;
    this.inputClass = undefined;
    this.eclScript = false;
    this.withUtils = false;
    this.disabled = false;
    this.required = false;
    this.invalid = false;
    this.helperId = undefined;
    this.helperText = undefined;
    this.placeholder = undefined;
    this.width = 'm';
    this.label = undefined;
    this.type = undefined;
    this.inputId = undefined;
    this.name = undefined;
    this.defaultValue = undefined;
    this.max = undefined;
    this.min = undefined;
    this.step = 1;
    this.valueLabel = undefined;
    this.buttonChooseLabel = undefined;
    this.buttonReplaceLabel = undefined;
    this.multiple = false;
  }
  getClass() {
    const styleClasses = ['ecl-input', this.styleClass];
    if (this.type === 'checkbox') {
      styleClasses.push('ecl-checkbox', `ecl-checkbox--${this.width}`);
      if (this.disabled) {
        styleClasses.push('ecl-checkbox--disabled');
      }
      if (this.invalid) {
        styleClasses.push('ecl-checkbox--invalid');
      }
    }
    if (this.type === 'radio') {
      styleClasses.push('ecl-radio', `ecl-radio--${this.width}`);
      if (this.disabled) {
        styleClasses.push('ecl-radio--disabled');
      }
      if (this.invalid) {
        styleClasses.push('ecl-radio--invalid');
      }
    }
    return styleClasses.join(' ');
  }
  getInputClasses(input) {
    let inputClasses = [`ecl-${input}__input`];
    if (this.type === 'range') {
      inputClasses = ['ecl-range', `ecl-range--${this.width}`];
    }
    if (this.type === 'file') {
      inputClasses = ['ecl-file-upload'];
    }
    if (this.type === 'text' || this.type === 'search') {
      inputClasses = ['ecl-text-input', `ecl-text-input--${this.width}`];
      if (this.invalid) {
        inputClasses.push('ecl-text-input--invalid');
      }
      if (this.disabled) {
        inputClasses.push('ecl-text-input--disabled');
      }
    }
    if (this.inputClass) {
      inputClasses.push(this.inputClass);
    }
    return inputClasses.join(' ');
  }
  getBoxClasses(input, box) {
    let boxClasses = [`ecl-${input}__${box}`];
    if (this.disabled) {
      boxClasses.push(`ecl-${input}__${box}--disabled`);
    }
    if (this.invalid) {
      boxClasses.push(`ecl-${input}__${box}--invalid`);
    }
    return boxClasses.join(' ');
  }
  componentWillLoad() {
    if (this.withUtils && !document.querySelector('#ecl-utils-styles')) {
      const style = document.createElement('link');
      style.rel = 'stylesheet';
      style.type = 'text/css';
      style.id = 'ecl-utils-styles';
      style.href = getAssetPath(`./build/styles/ecl-utilities-${this.theme}.css`);
      document.body.appendChild(style);
    }
  }
  componentDidRender() {
    if (this.type === 'range' && this.eclScript) {
      const src = getAssetPath('./build/scripts/ecl-range-vanilla.js');
      if (document.querySelector(`script[src="${src}"]`)) {
        document.querySelector(`script[src="${src}"]`).remove();
      }
      const script = document.createElement('script');
      script.src = src;
      script.onload = () => {
        const formGroup = this.el.closest('.ecl-form-group');
        formGroup.setAttribute('data-ecl-range', 'data-ecl-range');
        const range = new ECL.Range(formGroup);
        range.init();
      };
    }
    if (this.type === 'file' && this.eclScript) {
      const src = getAssetPath('./build/scripts/ecl-file-upload-vanilla.js');
      if (document.querySelector(`script[src="${src}"]`)) {
        document.querySelector(`script[src="${src}"]`).remove();
      }
      const script = document.createElement('script');
      script.src = src;
      script.onload = () => {
        const fileUpload = new ECL.FileUpload(this.el.firstElementChild);
        fileUpload.init();
      };
      // @ts-ignore
      const observer = new MutationObserver((mutationsList, observer) => {
        for (const mutation of mutationsList) {
          if (mutation.type === 'childList') {
            const nodes = mutation.addedNodes;
            nodes.forEach(node => {
              const htmlNode = node;
              htmlNode.classList.add(`sc-ecl-input-${this.theme}`);
              const name = htmlNode.querySelector('.ecl-file-upload__item-name');
              if (name) {
                name.classList.add(`sc-ecl-input-${this.theme}`);
              }
              const meta = htmlNode.querySelector('.ecl-file-upload__item-meta');
              if (meta) {
                meta.classList.add(`sc-ecl-input-${this.theme}`);
              }
            });
          }
        }
      });
      observer.observe(this.el.querySelector('.ecl-file-upload__list'), {
        attributes: true,
        childList: true,
        subtree: true,
      });
      document.body.appendChild(script);
    }
  }
  render() {
    const wrapperAttrs = {};
    if (this.type === 'range') {
      wrapperAttrs['data-ecl-range'] = true;
    }
    if (this.type === 'file') {
      wrapperAttrs['data-ecl-file-upload-group'] = true;
    }
    const attributes = {
      class: this.getInputClasses(this.type),
      type: this.type,
      id: this.inputId,
      name: this.name,
      required: this.required,
      disabled: this.disabled,
      value: this.defaultValue,
      placeholder: this.placeholder,
    };
    if (this.type === 'file') {
      attributes['data-ecl-file-upload-input'] = true;
      attributes['multiple'] = this.multiple;
    }
    if (this.type === 'range') {
      attributes['data-ecl-range-input'] = true;
      attributes['min'] = this.min;
      attributes['max'] = this.max;
      attributes['step'] = this.step;
    }
    return (h("div", Object.assign({ class: this.getClass() }, wrapperAttrs), h("input", Object.assign({}, attributes)), this.type === 'checkbox' ?
      h("label", { class: this.getBoxClasses('checkbox', 'label'), htmlFor: this.inputId }, h("span", { class: this.getBoxClasses('checkbox', 'box') }, h("ecl-icon", { "style-class": `ecl-checkbox__icon sc-ecl-input-${this.theme}`, icon: "check", size: "m" })), h("span", { class: "ecl-checkbox__text" }, this.label))
      : '', this.type === 'checkbox' && this.helperText ?
      h("div", { class: "ecl-checkbox__help", id: this.helperId }, this.helperText)
      : '', this.type === 'radio' ?
      h("label", { class: this.getBoxClasses('radio', 'label'), htmlFor: this.inputId }, h("span", { class: this.getBoxClasses('radio', 'box') }, h("span", { class: "ecl-radio__box-inner" })), h("span", { class: "ecl-radio__text" }, this.label))
      : '', this.type === 'radio' && this.helperText ?
      h("div", { class: "ecl-radio__help", id: this.helperId }, this.helperText)
      : '', this.type === 'range' ?
      h("div", { class: "ecl-range__value" }, this.valueLabel, h("span", { class: "ecl-range__value-current", "data-ecl-range-value-current": true }, " ")) : '', this.type === 'file' ?
      h("label", { class: "ecl-file-upload__button-container", htmlFor: this.inputId }, h("span", { class: "ecl-file-upload__button ecl-button ecl-button--primary", "data-ecl-file-upload-button": true, "data-ecl-file-upload-label-choose": this.buttonChooseLabel, "data-ecl-file-upload-label-replace": this.buttonReplaceLabel }, this.buttonChooseLabel)) : '', this.type === 'file' ?
      h("ul", { class: "ecl-file-upload__list", "data-ecl-file-upload-list": true }) : ''));
  }
  static get is() { return "ecl-input"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() {
    return {
      "ec": ["./build/styles/ecl-input-ec.css"],
      "eu": ["./build/styles/ecl-input-eu.css"]
    };
  }
  static get styleUrls() {
    return {
      "ec": ["./build/styles/ecl-input-ec.css"],
      "eu": ["./build/styles/ecl-input-eu.css"]
    };
  }
  static get assetsDirs() { return ["build"]; }
  static get properties() {
    return {
      "theme": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "theme",
        "reflect": false,
        "defaultValue": "'ec'"
      },
      "styleClass": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "style-class",
        "reflect": false
      },
      "inputClass": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "input-class",
        "reflect": false
      },
      "eclScript": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "ecl-script",
        "reflect": false,
        "defaultValue": "false"
      },
      "withUtils": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "with-utils",
        "reflect": false,
        "defaultValue": "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"
      },
      "required": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "required",
        "reflect": false,
        "defaultValue": "false"
      },
      "invalid": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "invalid",
        "reflect": false,
        "defaultValue": "false"
      },
      "helperId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "helper-id",
        "reflect": false
      },
      "helperText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "helper-text",
        "reflect": false
      },
      "placeholder": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "placeholder",
        "reflect": false
      },
      "width": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "width",
        "reflect": false,
        "defaultValue": "'m'"
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "label",
        "reflect": false
      },
      "type": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "type",
        "reflect": false
      },
      "inputId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "input-id",
        "reflect": false
      },
      "name": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "name",
        "reflect": false
      },
      "defaultValue": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "default-value",
        "reflect": false
      },
      "max": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "max",
        "reflect": false
      },
      "min": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "min",
        "reflect": false
      },
      "step": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "step",
        "reflect": false,
        "defaultValue": "1"
      },
      "valueLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "value-label",
        "reflect": false
      },
      "buttonChooseLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "button-choose-label",
        "reflect": false
      },
      "buttonReplaceLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "button-replace-label",
        "reflect": false
      },
      "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 elementRef() { return "el"; }
}
//# sourceMappingURL=ecl-input.js.map
