<script setup>
import { ref, defineProps, inject, watch } from "vue";
import useSearchParams from "@/hooks/useSearchParam";
import { twMerge } from "tailwind-merge";

const props = defineProps({
  initialData: Object,
});
const { changeParams, searchParams } = useSearchParams();

watch(
  () => props.initialData,
  (newValue, oldValue) => {
    if (newValue?.options[0]) {
      const { option, camera_position, target_position } = newValue.options[0];
      changeParams({ option, camera_position, target_position });
    }
  },
  {
    deep: true,
  }
);
</script>

<template>
  <div
    class="flex absolute top-0 left-1/2 -translate-x-1/2 z-50"
    v-if="initialData?.options"
  >
    <template v-for="option in initialData.options">
      <button
        v-if="option.visible"
        :key="`option_${option.option}`"
        type="button"
        :class="
          twMerge(
            'btn btn-sm mx-1',
            parseInt(searchParams?.option) === option.option
              ? 'btn-info'
              : 'btn-outline-info'
          )
        "
        @click.prevent="
          () =>
            changeParams({
              option: option.option,
              camera_position: option.camera_position,
              target_position: option.target_position
            })
        "
      >
        {{ option.text }}
      </button>
    </template>
  </div>
</template>

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