<template>
  <label :class="`${$classPrefix}-checkbox-con`">
    <input
      type="checkbox"
      ref="input"
      v-model="computedValue"
      :value="propModel"
      :indeterminate.prop="indeterminate"
    />
    <div :class="`${$classPrefix}-checkbox`">
      <irbis-icon v-if="localValue" name="check" />
    </div>
    <span v-if="!!$slots.default" :class="`${$classPrefix}-checkbox__label`">
      <slot />
    </span>
  </label>
</template>

<script>
export default {
  name: "IrbisCheckbox",

  props: {
    value: [String, Number, Boolean, Function, Object, Array],
    propModel: [String, Number, Boolean, Function, Object, Array],
    indeterminate: Boolean
  },

  data() {
    return {
      localValue: this.propModel
    };
  },

  watch: {
    value(value) {
      this.localValue = value;
    }
  },

  computed: {
    computedValue: {
      get() {
        return this.localValue;
      },
      set(value) {
        this.localValue = value;
        this.$emit("input", value);
      }
    }
  }
};
</script>