<template>
  <div class="text-center">
    <v-menu open-on-hover>
      <template v-slot:activator="{ props }">
        <v-btn v-bind="props">
          <v-icon>mdi-cog</v-icon>
        </v-btn>
      </template>

      <v-list style="background-color: #4F5473">
        <v-list-item
          style="background-color: #4F5473"
          v-for="(item, index) in items"
          :key="index"
          @click="handleMenuClick(index)"
        >
        <v-list-item-title style="color: white">{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>

    <!-- Dialog สำหรับ StockConfig -->
    <v-dialog v-model="showCollectDialog" max-width="700px">
        <StockConfig />
    </v-dialog>

    <!-- Dialog สำหรับ PrioritySetting -->
    <v-dialog v-model="showPriorityDialog" max-width="400px">
        <PrioritySetting :currentPage="currentPage" />
    </v-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import StockConfig from './StockConfig.vue';
import PrioritySetting from './PrioritySetting.vue';
import { usePageContextStore } from '@/stores/pageContext';

const items = ref([
  { title: 'จัดแต่งการเก็บ' },
  { title: 'ลำดับความสำคัญ' },
]);

const showCollectDialog = ref(false);
const showPriorityDialog = ref(false);

const handleMenuClick = (index: number) => {
  if (index === 0) {
    showCollectDialog.value = true;
  } else if (index === 1) {
    showPriorityDialog.value = true;
  }
};

const pageContext = usePageContextStore();
const currentPage = computed(() => pageContext.currentPage);
</script>

<style scoped>
.v-btn {
  background-color: #333647;
  color: #ffffff;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.v-btn:hover {
  background-color: #7e9cd3;
}

.v-icon {
  font-size: 32px;
}
</style>