<template>
  <div class="bg-white dark:bg-dark-grey rounded-lg">
    <div class="p-6 flex flex-col gap-6">
      <div class="flex justify-between items-center">
        <h4 class="text-red font-bold text-lg">Delete this {{ systemStore.delete.board ? 'board' : 'task' }}</h4>
      </div>
      <p class="text-medium-grey text-sm">{{ warning }}</p>
      <div class="flex flex-col gap-4">
        <ButtonDelete @click.stop="onDelete">Delete</ButtonDelete>
        <ButtonSecondaryLarge @click.stop="onCancel">Cancel</ButtonSecondaryLarge>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useBoardsStore } from '@/store/boards.js';
import { useSystemStore } from '@/store/system.js';
import ButtonDelete from '@/components/buttons/Destructive.vue';
import ButtonSecondaryLarge from '@/components/buttons/SecondaryLarge.vue';


const boardsStore = useBoardsStore();
const systemStore = useSystemStore();

const warning = computed(() => {
  if (systemStore.delete.board) {
    return `Are you sure you want to delete the ‘${boardsStore.getCurrentBoard.name}’ board? This action will remove all columns and tasks and cannot be reversed.`
  } else {
    return `Are you sure you want to delete the ‘${boardsStore.getTask.title}’ task and its subtasks? This action cannot be reversed.`
  }
})

const onDelete = () => {
  if (systemStore.delete.board) {
    boardsStore.boards.splice(boardsStore.selectedBoard, 1)
    systemStore.hideOverlay()
  } else {
    boardsStore.getCurrentColumn.tasks.splice(boardsStore.selectedTask, 1)
    systemStore.hideOverlay()
  }
}
const onCancel = () => {
  systemStore.hideOverlay()
}
</script>