import { Component, h, Event, Prop, Watch } from '@stencil/core';
export class SparkleInput {
  arrayDataWatcher(newValue) {
    if (typeof newValue === 'string') {
      this._options = JSON.parse(newValue);
    }
    else {
      this._options = newValue;
    }
  }
  componentWillLoad() {
    if (this.type == 'select') {
      this.arrayDataWatcher(this.options);
    }
  }
  handleChange(event) {
    const value = this.type === 'checkbox' ? event.target.checked : event.target.value;
    this.value = value;
    this.valueChanged.emit(value);
    if (this.type === 'checkbox') {
      this.checkedChanged.emit(value);
    }
  }
  render() {
    switch (this.type) {
      case 'text' || 'email' || 'number' || 'tel' || 'url':
        return (h("div", null,
          h("ion-item", null,
            h("ion-label", null, this.label),
            h("ion-input", { type: this.type, value: this.value, placeholder: this.placeholder, onInput: (event) => this.handleChange(event), required: true }))));
      case 'textarea':
        return (h("div", null,
          h("ion-item", null,
            h("ion-label", null, this.label),
            h("ion-textarea", { value: this.value, placeholder: this.placeholder, onInput: (event) => this.handleChange(event), required: true }))));
      case 'checkbox':
        return (h("div", null,
          h("ion-item", null,
            h("ion-checkbox", { slot: "start", checked: this.checked, onChange: (event) => this.handleChange(event) }),
            h("ion-label", null, this.label))));
      case 'select':
        return (h("div", null,
          h("ion-item", null,
            h("ion-select", { value: this.value, placeholder: this.label, onIonChange: event => this.handleChange(event) }, this._options.map(option => (h("ion-select-option", { key: option.value, value: option.value }, option.label)))))));
      default:
        return null;
    }
  }
  static get is() { return "sparkle-input"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-input.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-input.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'text' | 'textarea' | 'checkbox' | 'select'",
        "resolved": "\"checkbox\" | \"select\" | \"text\" | \"textarea\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": false
    },
    "value": {
      "type": "any",
      "mutable": true,
      "complexType": {
        "original": "string | boolean",
        "resolved": "boolean | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "label",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "name",
      "reflect": false
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "placeholder",
      "reflect": false
    },
    "checked": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "checked",
      "reflect": false
    },
    "options": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "{ value: string; label: string }[] | string",
        "resolved": "string | { value: string; label: string; }[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "options",
      "reflect": false
    }
  }; }
  static get events() { return [{
      "method": "valueChanged",
      "name": "valueChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string | boolean",
        "resolved": "boolean | string",
        "references": {}
      }
    }, {
      "method": "checkedChanged",
      "name": "checkedChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      }
    }]; }
  static get watchers() { return [{
      "propName": "options",
      "methodName": "arrayDataWatcher"
    }]; }
}
