import { __assign } from 'tslib';
import { withThemeableProps } from '../../useThemeable.js';
import { classNamesFunction, getId } from '@uifabric-vue/utilities';
import Vue from 'vue';
import { Label } from '../Label/Label.js';
import { Icon } from '../Icon/Icon.js';

var getClassNames = classNamesFunction();
var CheckboxBase = Vue.extend({
  name: "CheckboxBase",
  model: {
    prop: "checked",
    event: "input"
  },
  props: __assign(__assign({}, withThemeableProps()), { checked: { type: Boolean, default: false }, defaultChecked: { type: Boolean, default: false }, indeterminate: { type: Boolean, default: false }, defaultIndeterminate: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, required: { type: Boolean, default: false }, label: { type: String, default: null }, title: { type: String, default: null }, boxSide: {
    type: String,
    default: "start",
    validator: function(v) {
      return v && ["start", "end"].indexOf(v) > -1;
    }
  }, checkmarkIconProps: { type: Object, default: void 0 } }),
  data: function() {
    return {
      internalValue: this.checked || this.defaultChecked,
      isIndeterminate: this.indeterminate || this.defaultIndeterminate
    };
  },
  computed: {
    classNames: function() {
      var _a = this, theme = _a.theme, className = _a.className, disabled = _a.disabled, isIndeterminate = _a.isIndeterminate, internalValue = _a.internalValue, boxSide = _a.boxSide;
      return getClassNames(this.styles, {
        theme: theme,
        className: className,
        disabled: disabled,
        indeterminate: isIndeterminate,
        checked: internalValue,
        reversed: boxSide !== "start",
        isUsingCustomLabelRender: true
      });
    }
  },
  watch: {
    checked: function(value) {
      this.internalValue = value;
    }
  },
  methods: {
    onInput: function() {
      if (this.disabled)
        return;
      if (this.isIndeterminate) {
        this.internalValue = this.defaultChecked;
        this.isIndeterminate = false;
      } else {
        this.internalValue = !this.internalValue;
      }
      this.$emit("input", this.internalValue);
    }
  },
  render: function(h) {
    var _a = this, classNames = _a.classNames, title = _a.title, label = _a.label, checkmarkIconProps = _a.checkmarkIconProps;
    var id = getId("Checkbox");
    var $input = h("input", {
      class: classNames.input,
      attrs: __assign(__assign({ id: id }, this.$attrs), { disabled: this.disabled, type: "checkbox" }),
      on: {
        input: this.onInput
      }
    });
    return h("div", { class: classNames.root }, [
      $input,
      h(Label, {
        class: classNames.label,
        attrs: { for: id }
      }, [
        h("div", { class: classNames.checkbox }, [
          h(Icon, {
            class: classNames.checkmark,
            props: __assign({ iconName: "CheckMark" }, checkmarkIconProps)
          })
        ]),
        (label || this.$slots.default) && h("span", {
          class: classNames.text,
          attrs: {
            title: title
          }
        }, this.$slots.default || label)
      ])
    ]);
  }
});

export { CheckboxBase };
