<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 setup>
const props = defineProps({
  options: { type: Array, default: () => [] },
  modelValue: { type: [String, Array], default: '' },
  multiple: { type: Boolean, default: false },
  size: { type: String, default: 'default' }
});
const emit = defineEmits(['update:modelValue', 'change']);

function isSelected(v) {
  return props.multiple ? props.modelValue.indexOf(v) >= 0 : props.modelValue === v;
}
function toggle(o) {
  if (o.disabled) return;
  let next;
  if (props.multiple) {
    const arr = (props.modelValue || []).slice();
    const idx = arr.indexOf(o.value);
    if (idx >= 0) arr.splice(idx, 1); else arr.push(o.value);
    next = arr;
  } else {
    next = o.value;
  }
  emit('update:modelValue', next);
  emit('change', next);
}
</script>

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