<script setup>
import TrackerTimer from '@/components/TrackerTimer.vue'
import TaskHeader from '@/components/TaskHeader.vue'
import TaskRecord from '@/components/TaskRecord.vue'
</script>

<template>
  <main>
    <TrackerTimer @get-tasks="getTasks" />

    <div class="task-day-wrapper">
      <TaskHeader />
      <div class="task-wrapper" v-for="task in sortedData" :key="task._id">
        <TaskRecord :task="task" />
      </div>
    </div>
  </main>
</template>

<script>
import AppStore from '@/stores/AppStore'

export default {
  data() {
    return {
      tasks: AppStore.data.fetchedTasks
    }
  },
  methods: {
    async getTasks() {
      await AppStore.fetchData()
      this.tasks = AppStore.data.fetchedTasks
    }
  },
  computed: {
    sortedData() {
      return this.tasks.slice().sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
    }
  },
  async mounted() {
    await AppStore.fetchData()
    this.tasks = AppStore.data.fetchedTasks
  }
}
</script>
