<template>
  <div class="sv-button-group" :class="{'sv-button-group-circle': shape === 'circle'}" @click="handleClick">
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svButtonGroup',
    props: {
      shape: {
        type: String, // radius default
        default: 'default'
      },
      color: {
        type: String,
        default: 'light'
      },
      size: {
        type: String,
        default: 'default'
      },
      highlight: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        activeButtonIndex: -1
      }
    },
    methods: {
      setButtonClass () {
        let buttonSlots = this.$slots.default.filter(slot => {
          return slot.tag
        })

        buttonSlots.map((buttonSlot, index) => {
          buttonSlot.componentInstance.buttonColorClass = this.color
          buttonSlot.componentInstance.buttonSizeClass = this.size

          if (this.highlight) {
            buttonSlot.componentInstance.$el.addEventListener('click', () => {
              this.activeButtonIndex = index
              buttonSlots.forEach((buttonSlot, index) => {
                buttonSlot.componentInstance.isHighlight = this.activeButtonIndex === index
              })
            })
          }
        })
      },
      handleClick () {
        this.$emit('click', this.activeButtonIndex)
      }
    },
    mounted () {
      this.setButtonClass()
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-button-group{
    display: flex;
    height:100%;
    @include border-1px(all, $color-stable, pxToRem(8));
    /*border-radius: pxToRem(8);*/
    overflow: hidden;
    &.sv-button-group-circle{
      border-radius: pxToRem(50)
    }
    .sv-button{
      flex: 1;
      border:none;
      border-radius: 0;
      &:not(:last-child){
        @include border-1px(right, $color-stable);
      }
      &.sv-button-small{
        padding:pxToRem(10 0);
      }
      &.sv-button-large{
        padding:pxToRem(20 0);
      }
    }
  }
</style>
