<template>
	<VList class="swablab-tasks" v-if="!loading">
		<VListGroup v-for="status in fields.find(f => f.field == 'status')?.meta?.options?.choices" :key="status.value" open
			active arrowPlacement>
			<template #activator>
				<VListItem>
					{{ status.text }} ({{items.filter(i => i.status == status.value).length}})
				</VListItem>
			</template>

			<VListItem v-for="item in items.filter(i => i.status == status.value)" :key="item.id" clickable
				@click="router.push(`${collection}/${item.id}`)">
				<VListItemIcon>
					<VIcon
						:name="fields.find(f => f.field == 'category')?.meta?.options?.choices.find((c: any) => c.value == item.category).icon"
						:color="item.priority == 'high' ? 'orange' : item.priority == 'low' ? 'dimgrey' : ''" />
				</VListItemIcon>
				<VListItemContent>
					{{ item.title }}
				</VListItemContent>

				<VIcon v-if="item.responsibles.length == 0" name="person_search" color="green" />
				<VIcon v-if="item.responsibles.find(x => x.directus_users_id == me)" name="person_pin_circle" color="blue" />
				<VChip v-if="item.date_due" small>
					<display-datetime format="short" :value="item.date_due" use24 />
				</VChip>
			</VListItem>
		</VListGroup>
	</VList>
</template>

<style>
.swablab-tasks {
	--v-list-padding: 12px;
}

.swablab-tasks .v-list-group>.items {
	padding: var(--v-list-padding);
}

.swablab-tasks .v-chip {
	margin-left: 6px;
}
</style>

<script lang="ts">
import { Field } from '@directus/types';
import { defineComponent, PropType } from 'vue';

type Task = {
	id: string
	title: string
	status: string
	date_due?: string
	priority: string
	category: string
	description: string
	responsibles: {
		directus_users_id: {
			id: string
		}
	}[]
}

export default defineComponent({
	inheritAttrs: false,
	props: {
		collection: String,
		items: {
			type: Array as PropType<Task[]>,
			required: true,
		},
		loading: Boolean,
		error: Array,
		router: {
			type: Object,
			required: true,
		},
		fields: {
			type: Array as PropType<Field[]>,
			required: true,
		},
		me: Object,
	}
})
</script>
