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

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

const isActive = ref(props.stateValue);
// const emits = defineEmits({
//   stateValue: false
// });


// Watch for changes in props.stateValue to update isActive
watch(() => props.stateValue, (newValue) => {
  isActive.value = newValue;
});
</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>
            Lorem ipsum dolor sit amet, semper quis, sapien id natoque elit. Nostra urna at, magna at neque sed sed ante
            imperdiet, dolor mauris cursus velit, velit non, sem nec. Volutpat sem ridiculus placerat leo, augue in,
            duis erat proin condimentum in a eget, sed fermentum sed vestibulum varius ac, vestibulum volutpat orci ut
            elit eget tortor. Ultrices nascetur nulla gravida ante arcu. Pharetra rhoncus morbi ipsum, nunc tempor
            debitis, ipsum pellentesque, vitae id quam ut mauris dui tempor, aptent non. Quisque turpis. Phasellus quis
            lectus luctus orci eget rhoncus. Amet donec vestibulum mattis commodo, nulla aliquet, nibh praesent,
            elementum nulla. Sit lacus pharetra tempus magna neque pellentesque, nulla vel erat.

            <br>

            Fringilla tempor felis augue magna. Cum arcu a, id vitae. Pellentesque pharetra in cras sociis adipiscing
            est. Nibh nec mattis at maecenas, nisl orci aliquam nulla justo egestas venenatis, elementum duis vel porta
            eros, massa vitae, eligendi imperdiet amet. Nec neque luctus suscipit, justo sem praesent, ut nisl quisque,
            volutpat torquent wisi tellus aliquam reprehenderit, curabitur cras at quis massa porttitor mauris. Eros sed
            ultrices. Amet dignissim justo urna feugiat mauris litora, etiam accumsan, lobortis a orci suspendisse.
            Semper ac mauris, varius bibendum pretium, orci urna nunc ullamcorper auctor, saepe sem integer quam, at
            feugiat egestas duis. Urna ligula ante. Leo elementum nonummy. Sagittis mauris est in ipsum, nulla amet non
            justo, proin id potenti platea posuere sit ut, nunc sit erat bibendum. Nibh id auctor, ab nulla vivamus
            ultrices, posuere morbi nunc tellus gravida vivamus.

            <br>

            Mauris nec, facilisi quam fermentum, ut mauris integer, orci tellus tempus diam ut in pellentesque. Wisi
            faucibus tempor et odio leo diam, eleifend quis integer curabitur sit scelerisque ac, mauris consequat
            luctus quam penatibus fringilla dis, vitae lacus in, est eu ac tempus. Consectetuer amet ipsum amet dui, sed
            blandit id sed. Tellus integer, dignissim id pede sodales quis, felis dolorem id mauris orci, orci tempus
            ut. Nullam hymenaeos. Curabitur in a, tortor ut praesent placerat tincidunt interdum, ac dignissim metus
            nonummy hendrerit wisi, etiam ut.

            <br>

            Semper praesent integer fusce, tortor suspendisse, augue ligula orci ante asperiores ullamcorper. In sit per
            mi sed sed, mi vestibulum mus nam, morbi mauris neque vitae aliquam proin senectus. Ac amet arcu mollis ante
            congue elementum, inceptos eget optio quam pellentesque quis lobortis, sollicitudin sed vestibulum
            sollicitudin, lectus parturient nullam, leo orci ligula ultrices. At tincidunt enim, suspendisse est sit sem
            ac. Amet tellus molestie est purus magna augue, non etiam et in wisi id. Non commodo, metus lorem facilisi
            lobortis ac velit, montes neque sed risus consectetuer fringilla dolor. Quam justo et integer aliquam,
            cursus nulla enim orci, nam cursus adipiscing, integer torquent non, fringilla per maecenas. Libero ipsum
            sed tellus purus et. Duis molestie placerat erat donec ut. Dolor enim erat massa faucibus ultrices in, ante
            ultricies orci lacus, libero consectetuer mauris magna feugiat neque dapibus, donec pretium et. Aptent dui,
            aliquam et et amet nostra ligula.

            <br>

            Augue curabitur duis dui volutpat, tempus sed ut pede donec. Interdum luctus, lectus nulla aenean elit, id
            sit magna, vulputate ultrices pellentesque vel id fermentum morbi. Tortor et. Adipiscing augue lorem cum non
            lacus, rutrum sodales laoreet duis tortor, modi placerat facilisis et malesuada eros ipsum, vehicula tempus.
            Ac vivamus amet non aliquam venenatis lectus, sociosqu adipiscing consequat nec arcu odio. Blandit orci nec
            nec, posuere in pretium, enim ut, consectetuer nullam urna, risus vel. Nullam odio vehicula massa sed, etiam
            sociis mauris, lacus ullamcorper, libero imperdiet non sodales placerat justo vehicula. Nec morbi imperdiet.
            Fermentum sem libero iaculis bibendum et eros, eget maecenas non nunc, ad pellentesque. Ut nec diam
            elementum interdum. Elementum vitae tellus lacus vitae, ipsum phasellus, corporis vehicula in ac sed massa
            vivamus, rutrum elit, ultricies metus volutpat.

            <br>

            Semper wisi et, sollicitudin nunc vestibulum, cursus accumsan nunc pede tempus mi ipsum, ligula sed. Non
            condimentum ac dolor sit. Mollis eu aliquam, vel mattis mollis massa ut dolor ante, tempus lacinia arcu.
            Urna vestibulum lorem, nulla fermentum, iaculis ut congue ac vivamus. Nam libero orci, pulvinar nulla, enim
            pellentesque consectetuer leo, feugiat rhoncus rhoncus vel. Magna sociosqu donec, dictum cursus ullamcorper
            viverra. Ultricies quis orci lorem, suspendisse ut vestibulum integer, purus sed lorem pulvinar habitasse
            turpis.
          </template>

          <v-card-actions>
            <v-btn text @click="$emit('stateValue', false)">Disagree</v-btn>
          </v-card-actions>
        </v-card>
      </template>
    </v-dialog>
  </div>
</template>
