import { Component, Element, Event, h, Host, Prop, State } from "@stencil/core";
export class CorejamFormInput {
  constructor() {
    this.type = "text";
    this.autocomplete = "off";
    this.required = false;
    this.checked = false;
    this.autofocus = false;
    /**
     * Style specific prop
     */
    this.w = 12;
    this.bg = "gray-100";
    this.hoverBg = "gray-300";
    this.focusBg = "gray-300";
    this.bWidth = 0;
    this.p = 4;
    this.focusOutline = "none";
    this.extraProps = {};
  }
  async componentWillLoad() {
    await this.computeStyles();
  }
  async computeStyles() {
    const hash = await (await import("../../utils/style")).calculateStyles(this);
    this.hash = hash;
  }
  onChange(event) {
    const input = event.currentTarget;
    this.inputValue = input.value;
    if (this.type == "checkbox") {
      this.inputValue = input.checked ? true : false;
    }
    this.formEvent.emit({
      name: this.formId,
      key: this.name,
      type: this.type,
      value: this.inputValue,
    });
  }
  componentWillRender() {
    if (this.type == "checkbox") {
      this.extraProps["checked"] = this.checked ? true : null;
    }
  }
  render() {
    const props = {
      id: this._id,
      name: this.name,
      type: this.type,
      formId: this.formId,
      autocomplete: this.autocomplete,
      required: this.required,
      placeholder: this.placeholder,
      autofocus: this.autofocus,
    };
    const cleanedProps = Object.keys(props)
      .filter((e) => props[e] !== null)
      .reduce((o, e) => {
      o[e] = props[e];
      return o;
    }, {});
    return (h(Host, { style: { display: "block", width: "100%" } },
      h("corejam-box", { flex: true, direction: "col", w: "12", mb: 3 },
        this.label && (h("corejam-box", { mb: 4 },
          h("label", { htmlFor: this.name },
            h("corejam-type", { size: "sm", color: "gray-500" }, this.label)))),
        h("input", Object.assign({}, cleanedProps, this.extraProps, { class: this.hash, "data-cy": this.formId + "-" + this.name, value: this.value, onInput: (e) => this.onChange(e) })))));
  }
  static get is() { return "corejam-form-input"; }
  static get properties() { return {
    "_id": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Form specific props"
      },
      "attribute": "_id",
      "reflect": true
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "name",
      "reflect": true
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": true,
      "defaultValue": "\"text\""
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "placeholder",
      "reflect": true
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "label",
      "reflect": true
    },
    "formId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "form-id",
      "reflect": true
    },
    "autocomplete": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "autocomplete",
      "reflect": true,
      "defaultValue": "\"off\""
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "required",
      "reflect": true,
      "defaultValue": "false"
    },
    "value": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "string | number",
        "resolved": "number | string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": true
    },
    "checked": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "checked",
      "reflect": true,
      "defaultValue": "false"
    },
    "autofocus": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "autofocus",
      "reflect": true,
      "defaultValue": "false"
    },
    "w": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Style specific prop"
      },
      "attribute": "w",
      "reflect": true,
      "defaultValue": "12"
    },
    "bg": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "bg",
      "reflect": true,
      "defaultValue": "\"gray-100\""
    },
    "hoverBg": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hover-bg",
      "reflect": true,
      "defaultValue": "\"gray-300\""
    },
    "focusBg": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "focus-bg",
      "reflect": true,
      "defaultValue": "\"gray-300\""
    },
    "bWidth": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "b-width",
      "reflect": true,
      "defaultValue": "0"
    },
    "p": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "p",
      "reflect": true,
      "defaultValue": "4"
    },
    "focusOutline": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "focus-outline",
      "reflect": true,
      "defaultValue": "\"none\""
    }
  }; }
  static get states() { return {
    "inputValue": {},
    "hash": {}
  }; }
  static get events() { return [{
      "method": "formEvent",
      "name": "formEvent",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
}
