<template>
	<div>

		<!-- ANCHOR Task creation dialog -->
		<w-dialog
			v-model="newTaskDialog"
			dialog-class="simple-dialog"
			width="500"
		>
			<VindiTitle icon="mdi mdi-account-multiple-plus">
				{{ $t("CREATE_NEW_TASK") }}
			</VindiTitle>

			<label v-html="$t('CREATE_NEW_TASK_SUMMARY')" />
			<w-input
				v-model="newTaskSummary"
				v-auto-focus
			/>

			<div class="simple-dialog__options">
				<w-button
					bg-color="shade-2"
					@click="newTaskDialog = false"
				>
					Close
				</w-button>
				<VindiSpacer />
				<w-button
					color="white"
					bg-color="primary"
					:loading="newTaskLoading"
					:disabled="!newTaskSummary"
					@click="createTask"
				>
					<w-icon class="left">
						mdi mdi-plus
					</w-icon>
					{{ $t("CREATE_NEW_TASK_CREATE") }}
				</w-button>
			</div>
		</w-dialog>

		<!-- ANCHOR Label management dialog -->
		<w-dialog
			v-model="labelManageDialog"
			dialog-class="simple-dialog manage-labels"
			width="700"
		>
			<VindiTitle icon="mdi mdi-tag-text">
				Manage task labels
			</VindiTitle>

			<w-flex class="manage-labels__bar">
				<w-input
					v-model="manageLabelFilter"
					bg-color="shade-3"
					placeholder="Filter labels..."
					inner-icon-left="mdi mdi-magnify"
					autocomplete="off"
					color="grey"
				/>
			</w-flex>

			<div class="manage-labels__lists">
				<div
					v-for="(type, i) in labelColumns"
					:key="i"
				>
					<div class="simple-subtitle">
						{{ type.name }}
						<w-tooltip right z-index="600">
							<template #activator="{ on }">
								<w-icon
									class="manage-labels__help"
									v-on="on"
								>
									mdi mdi-help-circle-outline
								</w-icon>
							</template>
							{{ type.description }}
						</w-tooltip>
						<!-- <VindiSpacer />
						<w-button
							icon="mdi mdi-plus"
							bg-color="transparent"
						/> -->
					</div>
					<div
						v-if="!type.labels.length"
						class="manage-labels__empty"
					>
						No labels found
					</div>
					<TaskLabel
						v-for="label in type.labels"
						:key="label.id"
						:value="label"
						@click.native="requestEditLabel(label)"
					>
						<w-icon>
							mdi mdi-pencil
						</w-icon>
					</TaskLabel>
				</div>
			</div>

			<w-flex>
				<w-button
					bg-color="shade-2"
					@click="labelManageDialog = false"
				>
					Close
				</w-button>
				<VindiSpacer />
				<w-button
					@click="requestNewLabel"
				>
					Create label
					<w-icon class="right">
						mdi mdi-plus
					</w-icon>
				</w-button>
			</w-flex>
		</w-dialog>

		<!-- ANCHOR Label creation and editing dialog -->
		<w-dialog
			v-model="editLabelDialog"
			dialog-class="simple-dialog"
			width="500"
		>
			<VindiTitle v-if="isEditingNewLabel" icon="mdi mdi-tag-plus">
				{{ $t("CREATE_NEW_LABEL") }}
			</VindiTitle>
			<VindiTitle v-else icon="mdi mdi-tag">
				Edit label
			</VindiTitle>

			<label v-html="$t('CREATE_NEW_LABEL_NAME')" />
			<w-input
				v-model="editLabelName"
				v-auto-focus
			/>

			<template v-if="isEditingNewLabel">
				<label v-html="$t('CREATE_NEW_LABEL_TYPE')" />
				<w-select
					v-model="editLabelType"
					:items="labelTypes"
					:menu-props="{'z-index': 600}"
				/>
			</template>

			<template v-if="isLabelColorSupported">
				<label v-html="$t('CREATE_NEW_LABEL_COLOR')" />
				<VindiColorPicker
					v-model="editLabelColor"
				/>
			</template>

			<template v-if="isLabelIconSupported">
				<label v-html="$t('CREATE_NEW_LABEL_ICON')" />
				<VindiIconPicker
					v-model="editLabelIcon"
				/>
			</template>

			<div class="simple-dialog__options">
				<w-button
					bg-color="shade-2"
					@click="editLabelDialog = false"
				>
					Close
				</w-button>
				<VindiSpacer />
				<w-button
					v-if="!isEditingNewLabel"
					bg-color="error"
					:loading="editLabelLoading"
					@click="deleteLabel"
				>
					Delete
					<w-icon class="right">
						mdi mdi-delete
					</w-icon>
				</w-button>
				<w-button
					color="white"
					bg-color="primary"
					:loading="editLabelLoading"
					:disabled="!isLabelValid"
					@click="saveLabel"
				>
					<!-- {{ $t("CREATE_NEW_TASK_CREATE") }} -->
					Save
					<w-icon class="right">
						mdi mdi-check
					</w-icon>
				</w-button>
			</div>
		</w-dialog>
	</div>
</template>

<script lang="ts">
import createTask from '~/assets/query/project/createTask.gql';
import createLabel from '~/assets/query/project/createLabel.gql';
import updateLabel from '~/assets/query/project/updateLabel.gql';
import deleteLabel from '~/assets/query/project/deleteLabel.gql';
import { Nullable } from '~/typings/helpers';
import Vue from 'vue';

export default Vue.extend({

	props: {
		project: Object
	},
	
	data: () => ({
		deletionDialog: false,

		// New task
		newTaskSummary: '',
		newTaskLoading: false,

		// Manage labels
		manageLabelsLoading: false,
		manageLabelFilter: '',

		// Create label
		editLabelLoading: false,
		editLabelDialog: false,
		editLabelId: null as Nullable<number>,
		editLabelName: '',
		editLabelColor: '',
		editLabelIcon: '',
		editLabelType: '',

		labelTypes: [
			{ label: 'Primary', value: 'PRIMARY' },
			{ label: 'Secondary', value: 'SECONDARY' },
			{ label: 'Tag', value: 'TAG' }
		],
	}),

	computed: {
		newTaskDialog: {
			get(): boolean {
				return this.$store.state.newTaskDialog;
			},
			set(value: boolean) {
				this.$store.commit('viewNewTaskDialog', value);
			}
		},
		labelManageDialog: {
			get(): boolean {
				return this.$store.state.labelManageDialog;
			},
			set(value: boolean) {
				this.$store.commit('viewLabelManageDialog', value);
			}
		},
		isLabelValid(): boolean {
			if(!this.editLabelName) {
				return false;
			}

			if(this.isLabelColorSupported && !this.editLabelColor) {
				return false;
			}

			if(this.isLabelIconSupported && !this.editLabelIcon) {
				return false;
			}

			return true;
		},
		isLabelColorSupported(): boolean {
			return this.editLabelType == 'PRIMARY' || this.editLabelType == 'SECONDARY';
		},
		isLabelIconSupported(): boolean {
			return this.editLabelType == 'PRIMARY';
		},
		isEditingNewLabel(): boolean {
			return this.editLabelId === null;
		},
		labelColumns(): any {
			const query = this.manageLabelFilter.toLowerCase();
			const filtered: any[] = this.project.labels.filter((label: any) => {
				return !query || label.title.toLowerCase().includes(query);
			});

			return [
				{
					name: 'Primary labels',
					description: 'Primary labels are used to convey the main purpose of a task. Each task can carry at most one label.',
					labels: filtered.filter(label => label.type == 'PRIMARY')
				},
				{
					name: 'Secondary labels',
					description: 'Secondary labels can be added to tasks with no restrictions and convey a tasks secondary purpose.',
					labels: filtered.filter(label => label.type == 'SECONDARY')
				},
				{
					name: 'Tag labels',
					description: 'Tag labels are only visible when viewing a task directly and can be used to filter tasks.',
					labels: filtered.filter(label => label.type == 'TAG')
				}
			];
		}
	},

	watch: {
		labelManageDialog(value) {
			if(!value) {
				this.editLabelDialog = false;
			}
		}
	},

	methods: {
		async createTask() {
			this.newTaskLoading = true;

			await this.$api.query(createTask, {
				pid: this.project.id,
				summary: this.newTaskSummary
			});

			this.newTaskLoading = false;
			this.newTaskDialog = false;
		},

		async saveLabel() {
			this.editLabelLoading = true;

			if(this.editLabelId === null) {
				await this.$api.query(createLabel, {
					projectId: this.project.id,
					details: {
						title: this.editLabelName,
						color: this.editLabelColor,
						icon: this.editLabelIcon,
						type: this.editLabelType
					}
				});
			} else {
				await this.$api.query(updateLabel, {
					id: this.editLabelId,
					details: {
						title: this.editLabelName,
						color: this.editLabelColor || undefined,
						icon: this.editLabelIcon || undefined,
					}
				});
			}

			this.editLabelDialog = false;
			this.editLabelLoading = false;
		},

		async deleteLabel() {
			this.editLabelLoading = true;

			await this.$api.query(deleteLabel, {
				id: this.editLabelId,
			});

			this.editLabelLoading = false;
			this.editLabelDialog = false;
		},

		requestNewLabel() {
			this.editLabelId = null;
			this.editLabelName = '',
			this.editLabelIcon = '',
			this.editLabelColor = '',
			this.editLabelType = 'SECONDARY',
			this.editLabelDialog = true;
		},

		requestEditLabel(label: any) {
			this.editLabelId = label.id,
			this.editLabelName = label.title,
			this.editLabelIcon = label.icon,
			this.editLabelColor = label.color,
			this.editLabelType = label.type,
			this.editLabelDialog = true;
		}
	}
});
</script>

<style lang="scss">
.manage-labels {

	&__bar {
		@include margin(3, t);
		@include margin(5, b);

		gap: 0.5rem;
	}

	&__lists {
		min-height: 16rem;
		display: flex;

		> div {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			gap: 0.25rem;

			&:not(:last-child) {
				@include margin(3, r);
				@include padding(3, r);

				border-right: 1px solid var(--color-shade-2);
			}
		}

		.simple-subtitle {
			padding-bottom: 0;
		}

		.w-button {
			align-self: flex-start;
		}

		.task-label {
			cursor: pointer;
		}
	}

	&__details {
		flex: 1;
	}

	&__help {
		@include margin(2, l);
	}

	&__empty {
		@include font-size(sm);

		color: gray;
	}

	&__creator {
		@include padding(3);

		width: 20rem;

		> label:not(:first-child), .w-button {
			@include margin(4, t);
		}
	}

	.w-button {
		margin: 0;
	}
}
</style>