<template>
  <article class="group flex flex-col bg-white dark:bg-dark-grey p-4 rounded-lg cursor-pointer shadow-task max-w-[280px]">
    <h3 class="text-black dark:text-white font-bold group-hover:text-main-purple select-none">{{ task.title }}</h3>
    <!-- <p class="text-xs text-medium-grey font-bold select-none">{{ subtasksCompleted }} substasks</p> -->
    <div v-if="task.status === 'Appointment'">



      <button class="btn btn-xs btn-success">Tiny</button>
      <div class="badge badge-outline">{{ dayFormat }}</div>

      <div class="drawer drawer-end">
  <input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <!-- Page content here -->
    <label for="my-drawer-4" class="drawer-button btn btn-primary">Open drawer</label>
  </div> 
  <div class="drawer-side">
    <label for="my-drawer-4" class="drawer-overlay"></label>
    <ul class="menu p-4 w-80 h-full bg-base-200 text-base-content">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>



    </div>
    {{ task }}
  </article>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  task: {
    type: Object,
    required: true
  }
})

const dayFormat = computed(() => {
  const day = new Date(props.task.startdt).toTimeString().split(' ')[0];
  return day;
})

// const subtasksCompleted = computed(() => {
//   const completed = props.task.subtasks.filter((sub) => sub.isCompleted).length;
//   const total = props.task.subtasks.length;
//   return `${completed} of ${total}`
// })
</script>