import { Component, Event, h, Host, Prop, State, Watch } from '@stencil/core';
export class DvnSwitch {
  constructor() {
    this.internalValue = false;
    this.tint = 'primary';
    this.scale = 'medium';
    this.leaned = false;
    this.disabled = false;
    this.shape = 'rectangular';
    this.checked = false;
    this.onClick = () => {
      if (this.disabled) {
        return;
      }
      this.internalValue = !this.internalValue;
      // this is used to show the animation when the parent component re-renders
      // and the value of this component changes
      this.animationClass = this.internalValue ? 'to-checked' : 'to-unchecked';
      setTimeout(() => this.animationClass = '', 300);
      this.change.emit(this.internalValue);
    };
  }
  componentWillLoad() {
    this.internalValue = this.checked;
  }
  componentShouldUpdate(newValue, _oldValue, name) {
    // prevent re-render if the component already has the same value internally
    return !(name === 'checked' && this.internalValue === newValue);
  }
  watchHandler(newValue) {
    if (this.internalValue !== newValue) {
      // update the internal value if the value is changed externally
      this.internalValue = newValue;
    }
  }
  render() {
    return (h(Host, { tabindex: "0", class: {
        [this.tint]: true,
        [this.scale]: true,
        [this.shape]: true,
        leaned: this.leaned,
        disabled: this.disabled,
        passive: !this.internalValue,
      }, disabled: this.disabled, onClick: this.onClick, onKeyDown: (event) => {
        if (event.keyCode === 32) {
          event.preventDefault();
          this.onClick();
          return false;
        }
      } },
      h("div", { class: { 'switch-controller': true, [this.animationClass]: true } })));
  }
  static get is() { return "dvn-switch"; }
  static get originalStyleUrls() { return {
    "$": ["dvn-switch.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-switch.css"]
  }; }
  static get properties() { return {
    "tint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Tint",
        "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"secondary\" | \"warning\"",
        "references": {
          "Tint": {
            "location": "import",
            "path": "@dvn/alaca/theme"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "tint",
      "reflect": false,
      "defaultValue": "'primary'"
    },
    "scale": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Scale",
        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
        "references": {
          "Scale": {
            "location": "import",
            "path": "@dvn/alaca/theme"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "scale",
      "reflect": false,
      "defaultValue": "'medium'"
    },
    "leaned": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "leaned",
      "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"
    },
    "shape": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'rectangular' | 'rounded'",
        "resolved": "\"rectangular\" | \"rounded\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "shape",
      "reflect": false,
      "defaultValue": "'rectangular'"
    },
    "checked": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "checked",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "animationClass": {},
    "internalValue": {}
  }; }
  static get events() { return [{
      "method": "change",
      "name": "change",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get watchers() { return [{
      "propName": "checked",
      "methodName": "watchHandler"
    }]; }
}
