<template>
  <div>
    <ul class="buttongroup" :class="classes">
      <li
        v-for="(option, optionIdx) of options"
        :key="`option-${optionIdx}`"
        class="buttongroup__option"
        :class="{ 'buttongroup__option--active': optionIdx === active }"
        @click="handleClick(optionIdx, option.action)"
      >
        <slot>{{ option.label }}</slot>
      </li>
    </ul>
  </div>
</template>

<script>
import "../../../dist/components/Buttongroup.css";

export default {
  name: "sui-buttongroup",

  props: {
    primary: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array,
      default: () => [
        {
          label: "default option",
          action: () => {
            console.warn(
              "clicked but nothing happend, because no function is provided"
            );
          },
        },
      ],
    },
    size: {
      type: String,
      default: "medium",
      validator: function (value) {
        return ["small", "medium", "large"].indexOf(value) !== -1;
      },
    },
  },
  data() {
    return { active: 1 };
  },
  computed: {
    classes() {
      return {
        "buttongroup--primary": this.primary,
        "buttongroup--secondary": !this.primary,
        [`buttongroup--${this.size}`]: true,
      };
    },
    style() {
      return {
        backgroundColor: this.backgroundColor,
      };
    },
  },

  methods: {
    handleClick(index, callback) {
        if(this.active !== index){
            this.active = index
            return callback();
        }
    },
  },
};
</script>
