import create from "../utils/create";
import { addUnit } from "../utils/format/unit";
import Loading from "../loading";
import { FieldMixin } from "../mixins/field";
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: _vm.b({
        on: _vm.checked,
        loading: _vm.loading,
        disabled: _vm.disabled
      }),
      style: _vm.style,
      attrs: {
        "role": "switch",
        "aria-checked": String(_vm.checked)
      },
      on: {
        "click": _vm.onClick
      }
    }, [_c('div', {
      class: _vm.b('node')
    }, [_vm.loading ? _c('loading', {
      class: _vm.b('-loading'),
      attrs: {
        "color": _vm.checked ? _vm.activeColor : _vm.inactiveColor
      }
    }) : _vm._e()], 1)]);
  },
  name: "switch",
  mixins: [FieldMixin],
  components: {
    Loading: Loading
  },
  props: {
    size: [Number, String],
    value: Boolean,
    loading: Boolean,
    disabled: Boolean,
    activeColor: String,
    inactiveColor: String,
    activeValue: {
      type: Boolean,
      default: true
    },
    inactiveValue: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    checked: function checked() {
      return this.value === this.activeValue;
    },
    style: function style() {
      return {
        fontSize: addUnit(this.size),
        backgroundColor: this.checked ? this.activeColor : this.inactiveColor
      };
    }
  },
  methods: {
    onClick: function onClick(event) {
      this.$emit("click", event);

      if (!this.disabled && !this.loading) {
        var newValue = this.checked ? this.inactiveValue : this.activeValue;
        this.$emit("input", newValue);
        this.$emit("change", newValue);
      }
    }
  }
});