<script setup>
import useActiveBtn from "@/hooks/useActiveBtn"
import useSearchParam from "@/hooks/useSearchParam"
import ButtonConnectedGroup from "@/components/customUI/ButtonConnectedGroup.vue";
import { onMounted, watch } from "vue";
import { useRoute } from "vue-router"

const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
const route = useRoute()

const { changeParams, searchParams } = useSearchParam();

watch(selectedBtn, (newValue) => {
  console.log(newValue)
  newValue && changeParams({ ...searchParams.value, mode: newValue.key })
}, {
  deep: true,
  immediate: true,

})

watch(() => route.params, (newValue, oldValue) => {
  if (newValue.sub_system_id && newValue.floor_id) {
    setItems([{
      title: "2D",
      key: "2D",
      active: route.query.mode === "2D",
      disabled: newValue.floor_id === "main"
    }, {
      title: "3D",
      key: "3D",
      active: route.query.mode === "3D" || !route.query.mode
    }])
  }
}, {
  immediate: true,
})


</script>

<template>
  <ButtonConnectedGroup :items="items" className="btn-xs rounded-md mb-5"
    :onclick="(e, item) => changeActiveBtn(item)" />
</template>

<style lang='scss' scoped></style>