<template>
  <div class="button-group">
    <button v-for="(btn, index) in buttons" :key="index" :disabled="isDisabled" :class="{ active: activeButton === index && !isDisabled }"
      @click="setActiveButton(index, btn.label)">
      {{ btn.label }}
    </button>
  </div>
</template>

<script>
export default {
  props: {
    buttons: {
      type: Array,
      default: () => [],
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    initialActive: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      activeButton: this.initialActive,
    };
  },
  methods: {
    setActiveButton(index, label) {
      if (label == "Only Folders" && this.activeButton != index) {
        console.log("Only Folders && this.activeButton != index")
        this.$emit("disableAll");
      }
      if (label == "Only Folders" && this.activeButton == index) {
        console.log("Only Folders && this.activeButton == index")
        this.$emit("enableAll");
      }
      if (label == "Only Files" && this.activeButton != index) {
        console.log("Only Files && this.activeButton != index")
        this.$emit("enableAll");
      }
      // If the clicked button is already active, de-select it
      if (this.activeButton === index) {
        this.activeButton = null;
        this.$emit("remove-button-clicked", this.buttons[index].value);
      } else {
        // Emit remove-button-clicked for all other indexes
        this.buttons.forEach((button, idx) => {
          if (idx !== index) {
            this.$emit("remove-button-clicked", button.value);
          }
        });

        this.activeButton = index;
        this.$emit("button-clicked", this.buttons[index].value);
      }
    },
  },
  watch: {
    initialActive: {
      immediate: true,
      handler(newVal) {
        this.activeButton = newVal;
      },
    },
  },
};
</script>

<style scoped>
.button-group {
  margin:1em;
  display: flex;
  border: 1px solid #ccc;
  border-radius: 1em;
  overflow: hidden;
}

button {
  cursor: pointer;
  flex: 1;
  height: 3em;
  padding: 8px 16px;
  border: none;
  background-color: #f5f5f5;
  transition: background-color 0.3s;

  /* Add borders */
  border-right: 1px solid #ccc;
}

/* Remove the border from the last button */
.button-group>button:last-child {
  border-right: none;
}

button:hover {
  background-color: #e0e0e0;
}

button.active {
  background-color: var(--blue);
  color: #ffffff;
}
</style>
