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

const props = defineProps({
  initialData: Object,
  meterList: Array,
  selectedMeter: [String, Number, null],
});

const { changeParams, searchParams } = useSearchParams();
const emit = defineEmits(["update:selectedMeter"]);
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}`"
    >
      <template v-if="option.option === 5 && option.visible">
        <div class="dropdown inline-block">
          <button
            type="button"
            class="btn mx-1"
            :class="
              parseInt(searchParams?.option) === 5
                ? 'btn-info'
                : 'btn-outline-info'
            "
            @click.prevent="
              () => {
                changeParams({
                  option: option.option,
                });
                
              }
            "
            tabindex="0"
          >
            {{ option.text }}
          </button>
          <ul
            class="dropdown-content menu bg-base-100 rounded-box z-[1] w-32 p-2 shadow"
          >
            <li v-for="meter in props.meterList" :key="meter.main_id">
              <a
                href="#"
                :style="{
                  background:
                    props.selectedMeter === meter.main_id
                      ? '#2563eb'
                      : 'transparent',
                }"
                @click.prevent="
                  () => {
                    changeParams({
                      option: 5,
                      camera_position: meter.camera_position,
                      target_position: meter.target_position,
                    });
                    emit('update:selectedMeter', meter.main_id);
                  }
                "
              >
                {{ meter.name }}
              </a>
            </li>
          </ul>
        </div>
      </template>
      <template v-else>
        <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>
    </template>
  </div>
</template>

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