<script lang="ts" setup>
import {ref, watch, defineProps} from 'vue';

const props = defineProps({
  stateValue: {type: Boolean, required: true}
});

const isActive = ref(props.stateValue);

// Watch for changes in props.stateValue to update isActive
watch(() => props.stateValue, (newValue) => {
  isActive.value = newValue;
});

const listMenu = ref<any[]>([]);

$fetch(`/api/setting/getListMenu`)
    .then((response) => {
      console.log(response);
      listMenu.value = response;
    })
</script>


<template>
  <div class="pa-4 text-center">
    <v-dialog max-width="800" v-model="isActive" persistent>
      <!-- <template v-slot:activator="{ props: activatorProps }">
        <v-btn v-bind="activatorProps" text="Open Dialog"></v-btn>
      </template> -->

      <template v-slot:default="{ isActive }">
        <v-card>
          <template v-slot:title>
            <div class="d-flex justify-lg-space-between">
              <div>
                <h3>List Menu</h3>
              </div>
              <div>
                <v-btn icon="mdi-close" variant="flat" @click="$emit('stateValue', false)"></v-btn>
              </div>
            </div>
          </template>
          <template v-slot:text>
            <MasterListMenu :itemMenu="listMenu" />
          </template>
          <v-card-actions>
            <v-btn text @click="$emit('stateValue', false)">Disagree</v-btn>
            <v-btn text @click="$emit('stateValue', false)">Agree</v-btn>
          </v-card-actions>
        </v-card>
      </template>

    </v-dialog>
  </div>
</template>
