<template>
	<div class="task-tile" @click="openTask">
		<span class="task-tile__id">
			#{{ task.localId }}
		</span>
		<span>
			{{ task.summary }}
		</span>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { expectProp } from '../src/helpers';

export default Vue.extend({
	name: 'TaskTile',

	props: {
		task: {
			type: Object,
			required: true,
			validator: expectProp([
				'id',
				'localId',
				'summary',
				'isWatching',
				'assignees',
				'childTasks'
			])
		}
	},

	methods: {

		openTask() {
			this.$store.dispatch('openTaskView', this.task.id);
		}
		
	}
});
</script>

<style lang="scss">
.task-tile {
	@include rounded(xl);
	@include padding(3);

	cursor: pointer;
	user-select: none;
	background-color: var(--color-shade-0);
	box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

	@include dark {
		background-color: var(--color-shade-3);
	}

	&__id {
		@include font-weight(bold);
		@include padding(1, r);
	}

	&--ghost {
		box-shadow: unset;
		background-color: var(--color-shade-2);

		@include dark {
			background-color: var(--color-shade-3);
		}

		* {
			visibility: hidden;
		}
	}
}
</style>