<template>
  <div :class="{'fl-switcher-container': true, 'disabled': disabled}">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'FlSwitcher',
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },

  created () {
    this.$on('activeItem', this.setActiveItem)
  },

  beforeDestroy () {
    this.$off('activeItem', this.setActiveItem)
  },

  methods: {
    setActiveItem (component) {
      this.$children.forEach((item) => {
        if (component !== item) item.active = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .fl-switcher-container {
    display: flex;
    float: left;
    background-color: $light-01;
    cursor: pointer;
  }

  .fl-switcher-item {
    border: initial;
  }

  .fl-switcher-container .fl-switcher-item:first-child {
    border-right: initial;
    border-radius: 5px 0 0 5px;
  }

  .fl-switcher-container .fl-switcher-item:last-child {
    border-right: solid 1px $grey-01;
    border-radius: 0 5px 5px 0;
  }

  .disabled {
    opacity: 0.5;
    pointer-events: none;
  }
</style>
