import create from '../utils/create';
import findParent from '../mixins/find-parent';
import { addUnit } from '../utils/format/unit';
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(_vm.direction)
    }, [_c('div', {
      class: _vm.b('icon', [_vm.shape, {
        disabled: _vm.isDisabled,
        checked: _vm.checked
      }]),
      style: {
        fontSize: _vm.addUnits(_vm.iconSizeC)
      },
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          return _vm.toggle($event);
        }
      }
    }, [_vm._t("icon", [_c('icon', {
      style: _vm.iconStyle,
      attrs: {
        "name": "check"
      }
    })], {
      "checked": _vm.checked
    })], 2), _vm.$slots.default ? _c('span', {
      class: _vm.b('label', [{
        disabled: _vm.isDisabled
      }]),
      on: {
        "click": function click($event) {
          return _vm.toggle('label');
        }
      }
    }, [_vm._t("default")], 2) : _vm._e()]);
  },
  name: 'checkbox',
  mixins: [findParent],
  props: {
    name: null,
    value: null,
    disabled: Boolean,
    checkedColor: String,
    iconSize: [Number, String],
    labelDisabled: Boolean,
    shape: {
      type: String,
      default: 'round'
    }
  },
  computed: {
    iconSizeC: function iconSizeC() {
      return this.parent && this.parent.iconSize || this.iconSize;
    },
    checked: {
      get: function get() {
        return this.parent ? this.parent.value.indexOf(this.name) !== -1 : this.value;
      },
      set: function set(val) {
        if (this.parent) {
          this.setParentValue(val);
        } else {
          this.$emit('input', val);
        }
      }
    },
    isDisabled: function isDisabled() {
      return this.parent && this.parent.disabled || this.disabled;
    },
    iconStyle: function iconStyle() {
      var checkedColor = this.parent && this.parent.checkedColor || this.checkedColor;

      if (checkedColor && this.checked && !this.isDisabled) {
        return {
          borderColor: checkedColor,
          backgroundColor: checkedColor
        };
      }
    },
    direction: function direction() {
      return this.parent && this.parent.direction || null;
    }
  },
  watch: {
    value: function value(val) {
      this.$emit('change', val);
    }
  },
  created: function created() {
    this.findParent('vm-checkbox-group');
  },
  methods: {
    addUnits: function addUnits(val) {
      return addUnit(val);
    },
    toggle: function toggle(target) {
      this.$emit('click');

      if (!this.isDisabled && !(target === 'label' && this.labelDisabled)) {
        this.checked = !this.checked;
      }
    },
    setParentValue: function setParentValue(val) {
      var parent = this.parent;
      var value = parent.value.slice();

      if (val) {
        if (parent.max && value.length >= parent.max) {
          return;
        }
        /* istanbul ignore else */


        if (value.indexOf(this.name) === -1) {
          value.push(this.name);
          parent.$emit('input', value);
        }
      } else {
        var index = value.indexOf(this.name);
        /* istanbul ignore else */

        if (index !== -1) {
          value.splice(index, 1);
          parent.$emit('input', value);
        }
      }
    }
  }
});