<script setup>
import { ref, 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) => {
    if (newValue?.options[0]) {
      const { option, camera_position, target_position, top } = newValue.options[0];
      changeParams({ option, camera_position, target_position, top });
    }
  },
  { deep: true, immediate: true }
);
</script>

<template>
  <div class="h-16 z-50" v-if="initialData?.options">
    <template
      v-for="option in initialData.options"
      :key="`option_${option.option}`"
    >
      <button
        v-if="option.visible"
        :key="`option_${option.option}`"
        type="button"
        :class="
          twMerge(
            'btn 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,
              top: option.top
            })
        "
      >
        {{ option.text }}
      </button>
    </template>
  </div>
</template>

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