<template>
  <div class="kole-btngroup" :class="{ 'is-sm': size === 'small', 'is-lg': size === 'large' }">
    <button v-for="(o, i) in options" :key="i"
            class="kole-btngroup-btn"
            :class="{ 'is-selected': isSelected(o.value), 'is-disabled': !!o.disabled }"
            :disabled="!!o.disabled"
            @click="toggle(o)">
      {{ o.label }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'KoleButtonGroup',
  props: {
    options: { type: Array, default: function () { return []; } },
    value: { type: [String, Array], default: '' },
    multiple: { type: Boolean, default: false },
    size: { type: String, default: 'default' }
  },
  methods: {
    isSelected: function (v) {
      return this.multiple ? this.value.indexOf(v) >= 0 : this.value === v;
    },
    toggle: function (o) {
      if (o.disabled) return;
      var next;
      if (this.multiple) {
        var arr = (this.value || []).slice();
        var idx = arr.indexOf(o.value);
        if (idx >= 0) arr.splice(idx, 1); else arr.push(o.value);
        next = arr;
      } else {
        next = o.value;
      }
      this.$emit('input', next);
      this.$emit('change', next);
    }
  }
};
</script>

<style src="./ButtonGroup.css"></style>
