<template>
	<section class="project-general">
		<div class="project-general__grid">
			<div class="project-general__fields">
				<label v-html="$t('CREATE_NEW_PROJECT_NAME')" />
				<small>
					{{ $t('PROJECT_SETTINGS_GENERAL_PROJECT_NAME_DESC') }}
				</small>
				<w-input
					v-model="project.name"
				/>

				<label v-html="$t('CREATE_NEW_DESC')" />
				<small>
					{{ $t('PROJECT_SETTINGS_GENERAL_PROJECT_DESCRIPTION') }}
				</small>
				<w-textarea
					v-model="project.description"
					rows="3"
				/>

				<label>{{ $t('PROJECT_SETTINGS_GENERAL_ACCENT_COLOR') }}</label>
				<small>
					{{ $t('PROJECT_SETTINGS_GENERAL_ACCENT_COLOR_DESC') }}
				</small>
				<VindiColorPicker
					v-model="project.accentColor"
				/>

				<label>{{ $t('PROJECT_SETTINGS_GENERAL_KANBAN_COLOR') }}</label>
				<small>
					{{ $t('PROJECT_SETTINGS_GENERAL_KANBAN_COLOR_DESC') }}
				</small>
				<VindiColorPicker
					v-model="project.kanbanColor"
					clearable
				/>

				<label>{{ $t('PROJECT_SETTINGS_GENERAL_DEFAULT_VIEW') }}</label>
				<small>
					{{ $t('PROJECT_SETTINGS_GENERAL_DEFAULT_VIEW_DESC') }}
				</small>
				<w-select
					v-model="project.defaultView"
					:items="projectViews"
				/>

				<label>{{ $t('PROJECT_SETTINGS_GENERAL_PUBLIC_ACCESS') }}</label>
				<small>
					{{ $t('PROJECT_SETTINGS_GENERAL_PUBLIC_ACCESS_DESC') }}
				</small>
				<w-switch
					v-model="project.isPublic"
					color="success"
				/>

				<w-divider />

				<label>
					{{ $t('PROJECT_SETTINGS_GENERAL_DELETE_PROJECT') }}
				</label>
				<small>
					{{ $t('PROJECT_SETTINGS_GENERAL_DELETE_PROJECT_DESC') }}
				</small>

				<w-button
					outline
					color="error"
					class="project-general__archive"
					@click="deletionDialog = true"
				>
					{{ $t('PROJECT_SETTINGS_GENERAL_DELETE_PROJECT') }}
					<w-icon class="right">
						mdi mdi-delete
					</w-icon>
				</w-button>
			</div>
			<div class="project-general__uploads">
				<!-- TODO fix preview when switching tabs -->
				<label>{{ $t('PROJECT_SETTINGS_GENERAL_COVER_IMAGE') }}</label>
				<small>
					{{ $t('PROJECT_SETTINGS_GENERAL_COVER_IMAGE_DESC') }}
				</small>
				<div class="project-general__upload">
					<img
						:src="projectCoverPreview || require('~/assets/img/avatar-placeholder.svg')"
						class="project-general__upload-preview"
					>
					<VindiFileUpload
						v-model="project.coverImage"
						class="project-general__upload-file"
						show-cropper
						:crop-props="{'stencil-props': { aspectRatio: 1.5/1 }}"
						:max-size="10485760"
						@preview="updateCoverPreview"
					>
						<template #activator="{ on }">
							<w-button
								v-if="project.coverImage != original.coverImage"
								class="project-general__upload-option"
								icon="mdi mdi-undo"
								bg-color="info"
								color="white"
								lg
								@click="revertCover"
							/>
							<w-button
								v-if="project.coverImage"
								class="project-general__upload-option"
								icon="mdi mdi-delete"
								bg-color="error"
								color="white"
								lg
								@click="removeCover"
							/>
							<w-button
								class="project-general__upload-option"
								icon="mdi mdi-pencil"
								bg-color="primary"
								color="white"
								lg
								v-on="on"
							/>
						</template>
					</VindiFileUpload>
				</div>
			</div>
		</div>

		<!-- ANCHOR Deletion dialog -->
		<!-- NOTE Perhaps we want to think this through a bit more. Archive support may be possible-->
		<w-dialog
			v-model="deletionDialog"
			width="350"
		>
			<VindiTitle icon="mdi mdi-delete">
				Delete Project
			</VindiTitle>

			<w-divider />

			<div style="padding-bottom: 10px">
				<p style="padding-bottom: 10px">
					Are you sure?
				</p>
				<small>
					You are about to permanently delete this project. This cannot be undone!
				</small>
			</div>
			<div style="display: flex">
				<w-button
					text
					:disabled="deletionActive"
					@click="deletionDialog = false"
				>
					<w-icon class="left">
						mdi mdi-arrow-left
					</w-icon>
					Back
				</w-button>
				<VindiSpacer />
				<w-button
					bg-color="error"
					text
					:loading="deletionActive"
					@click="deleteProject"
				>
					Confirm
				</w-button>
			</div>
		</w-dialog>
	</section>
</template>

<script lang="ts">
import Vue from 'vue';
import deleteProject from '~/assets/query/project/deleteProject.gql';
export default Vue.extend({

	props: {
		project: Object
	},

	data: () => ({
		original: null as any,
		projectCoverPreview: '',
		projectBackgroundPreview: '',
		deletionActive: false,
		deletionDialog: false
	}),

	computed: {
		projectViews(): any {
			return this.$registries.projectViews.toItems().map(view => ({
				label: this.$t(view.content.name),
				value: view.id
			}));
		}
	},

	watch: {
		'project.coverImage'(value) {
			this.projectCoverPreview = value;
		}
	},

	created() {
		this.original = { ...this.project };
		this.projectCoverPreview = this.project.coverImage;
	},

	methods: {

		revertCover() {
			this.project.coverImage = this.original.coverImage;
			this.projectCoverPreview = this.original.coverImage;
		},

		removeCover() {
			this.project.coverImage = null;
			this.projectCoverPreview = '';
		},

		updateCoverPreview(preview: string) {
			this.projectCoverPreview = preview;
		},

		revertBackground() {
			this.project.backgroundImage = this.original.backgroundImage;
			this.projectBackgroundPreview = this.original.backgroundImage;
		},

		removeBackground() {
			this.project.backgroundImage = null;
			this.projectBackgroundPreview = '';
		},

		updateBackgroundPreview(preview: string) {
			this.projectBackgroundPreview = preview;
		},

		async deleteProject() {
			this.deletionActive = true;
			this.$router.push('/');

			await this.$api.query(deleteProject, {
				id: this.project.id
			});

			this.deletionActive = false;
		}
	}
});
</script>

<style lang="scss">
.project-general {
	@include padding(2, t);

	&__grid {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;

		@include breakpoint(lg) {
			flex-direction: row;
		}
	}

	&__fields {
		flex: 1;
		
		@include breakpoint(lg) {
			width: 0; // fix spacing issue
		}
	}

	&__uploads {
		width: 250px;
		order: -1;

		@include breakpoint(lg) {
			order: 1;
		}
	}

	&__fields, &__uploads {
		> label:not(:first-child), > .w-divider {
			@include margin(7, t);
		}
	}

	&__upload {
		@include margin(10, b);

		width: 13rem;
		position: relative;
	}

	&__upload-preview {
		@include rounded(xl);

		object-fit: cover;
		height: 8rem;
		width: 13rem;
	}

	&__upload-file {
		position: absolute;
		bottom: -1.25rem;
		right: -1.25rem;
	}

	// appending .w-button fixes prioritization
	&__upload-option.w-button {
		@include rounded(full);
		@include shadow;
		
		width: 2.75rem;
		height: 2.75rem;
	}

	&__archive {
		@include margin(2, t);
		
		margin-left: 0;
	}
}
</style>