<script setup>
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref, watch, inject } from "vue";
import useBuildingStore from "@/stores/useBuildingStore";
import useActiveBtn from "@/hooks/useActiveBtn";
import useSearchParam from "@/hooks/useSearchParam";

const route = useRoute();
const router = useRouter();
const store = useBuildingStore();
const { searchParams, changeParams } = useSearchParam();
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();

watch(selectedBtn, (newValue) => {
  changeParams({ ...searchParams.value, floor_id: newValue.key });
});

watch(
  () => store.floorList,
  (newValue) => {
    if (newValue) {
      const floorList = [
        ...store.floorList.map((d, idx) => {
          const fullUrl = d.floor_map_url;
          const uuid = fullUrl
            ? fullUrl.substring(fullUrl.lastIndexOf("/") + 1)
            : "";
          return {
            title: d.full_name,
            key: uuid,
            active: searchParams.value.floor_id
              ? searchParams.value.floor_id === uuid
              : idx == 0,
          };
        }),
      ];
      setItems(floorList);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<template>
  <div class="flex items-center justify-end gap-3">
    <ButtonConnectedGroup
      :items="items"
      className="z-20 m-2 lg:m-4 bg-slate-800 rounded-xl"
      color="info"
       size="sm"
      :onclick="(e, item) => changeActiveBtn(item)"
    />
  </div>
</template>

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