<script setup lang="ts">
import { useTreeDataStore } from '@/stores/tree-data'

const { deleteFolder } = useTreeDataStore()
const emit = defineEmits(['update:confirmDelete'])
const props = withDefaults(
  defineProps<{ confirmDelete: boolean; pathname: string }>(),
  {
    confirmDelete: false,
  }
)
</script>

<template>
  <q-dialog
    v-model="props.confirmDelete"
    persistent
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 400px">
      <q-card-section>
        
        <div class="text-h6"><q-icon name="error" color="negative" size="2.5rem"/>แจ้งเตือนการลบ</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        ถ้าดำเนินการต่อจะทำการลบ
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-primary">
        <q-space />
        <q-btn
          flat
          label="ยกเลิก"
          v-close-popup
          @click="
            () => {
              emit('update:confirmDelete')
            }
          "
        />

        <q-btn
          flat
          label="ลบ"
          v-close-popup
          class="text-red"
          @click="
            () => {
              deleteFolder(pathname)
              emit('update:confirmDelete')
            }
          "
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped>
.box {
  display: inline-block;
  border: 2px solid #f1f2f4;
  border-radius: 8px;
  cursor: pointer;
}

.dashed {
  opacity: 0.4;
  display: inline-block;
  border: 2px solid #babdc3;
  border-radius: 8px;
  cursor: pointer;
  border-style: dashed;
}

.add-icon {
  margin: auto auto;
}

.add-button {
  position: absolute;
  top: 75px;
  right: 45px;
  background-color: white;
}
</style>
