<template>
    <li
        class="card"
        :class="{
            'priority-high': task.priority === 'high',
            'priority-medium': task.priority === 'medium',
            'priority-low': task.priority === 'low',
        }"
    >
        <div class="card-header">
            <h3>{{ task.title }}</h3>
        </div>
        <dl>
            <AssigneeDetails :task />
            <StatusDetails :task />
            <PriorityDetails :task />
            <div>
                <dt>Created At:</dt>
                <dd>{{ formattedCreatedAt }}</dd>
            </div>
            <div>
                <dt>Updated At:</dt>
                <dd>{{ formattedUpdatedAt }}</dd>
            </div>
        </dl>
    </li>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { TaskItem } from "@/types";
import AssigneeDetails from "./Details/AssigneeDetails.vue";
import StatusDetails from "./Details/StatusDetails.vue";
import PriorityDetails from "./Details/PriorityDetails.vue";

interface TaskListItemProps {
    task: TaskItem;
}

const { task } = defineProps<TaskListItemProps>();

const formatterOptions = {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
    timeZoneName: "short",
    timeZone: "America/New_York",
} as const;

const formattedCreatedAt = computed(() =>
    new Intl.DateTimeFormat("en-US", formatterOptions).format(
        new Date(task.createdAt),
    ),
);

const formattedUpdatedAt = computed(() =>
    new Intl.DateTimeFormat("en-US", formatterOptions).format(
        new Date(task.updatedAt),
    ),
);
</script>
