import { computed } from "@vue/reactivity";
import { ref } from "vue";
export default function useActiveBtn(type = "single") {
  // default buttons
  const items = ref([]);

  const setItems = (btnGroup) => {
    items.value = btnGroup;
  };

  const selectedBtn = computed(() => {
    if (type === "single") {
      return items.value?.find((d) => {
        return d.active
      });
    } else if (type === "multiple") {
      return items.value?.filter(({ active }) => active);
    }
  });

  // change active button
  const changeActiveBtn = (item) => {
    if (type === "single") {
      // 先將全部變成false
      const newItems = Object.assign(items.value).map((it) => ({
        ...it,
        active: item.key === it.key,
      }));
      items.value = newItems;
    } else if (type === "multiple") {
      // 先將全部變成false
      const newItems = Object.assign(items.value).map((it) => ({
        ...it,
        active: item.key === it.key ? !item.active : it.active,
      }));
      items.value = newItems;
    }
  };

  return { items, changeActiveBtn, setItems, selectedBtn };
}