<script setup lang="ts">
import { ref } from 'vue';
import Test from "~/components/ui-components/dialogs/Test.vue";

// State untuk mengontrol modal
const showModal = ref(false);

// State untuk data array
const listData = ref<string[]>(['Data Existing 1']);

// Fungsi yang dijalankan jika user pilih "Ya" di child
const eksekusiTambahData = () => {
  const ID = Math.floor(Math.random() * 1000);
  listData.value.push(`Data Baru #${ID}`);
  console.log('Data berhasil ditambahkan dari Parent!');
};
</script>

<template>
  <v-container class="fill-height justify-center">
    <div class="text-center">
      <h2 class="mb-4">Daftar Data</h2>

      <v-list border class="mb-4 text-left" rounded="lg">
        <v-list-item v-for="(item, i) in listData" :key="i">
          {{ item }}
        </v-list-item>
      </v-list>

      <v-btn color="primary" size="large" @click="showModal = true">
        Tambah Data Baru
      </v-btn>

      <Test
          v-model="showModal"
          title="Konfirmasi Tambah"
          message="Apakah anda yakin ingin menambahkan data baru ke dalam array?"
          @action-ya="eksekusiTambahData"
      />
    </div>
  </v-container>
</template>
