<template>
	<section class="project-general">
		<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>
		<w-input
			v-model="project.accentColor"
			v-mask="'#XXXXXX'"
		/>

		<div class="project-general__palette">
			<div
				v-for="color in $store.state.config.colorPalette"
				:key="color"
				class="project-general__palette-color"
				:style="{ backgroundColor: color }"
				@click="project.accentColor = color"
			/>
		</div>

		<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"
		/>

		<!-- 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__cover">
			<img
				:src="projectCoverPreview || require('~/assets/img/avatar-placeholder.svg')"
				class="project-general__cover-preview"
			>
			<FileUpload
				v-model="project.coverImage"
				class="project-general__cover-upload"
				show-cropper
				:crop-props="{'stencil-props': { aspectRatio: 1.5/1 }}"
				@preview="updatePreview"
			>
				<template #activator="{ on }">
					<w-button
						v-if="project.coverImage != original.coverImage"
						class="project-general__cover-option"
						icon="mdi mdi-undo"
						bg-color="info"
						color="white"
						lg
						@click="revertCover"
					/>
					<w-button
						v-if="project.coverImage"
						class="project-general__cover-option"
						icon="mdi mdi-delete"
						bg-color="error"
						color="white"
						lg
						@click="removeCover"
					/>
					<w-button
						class="project-general__cover-option"
						icon="mdi mdi-pencil"
						bg-color="accent-1"
						color="white"
						lg
						v-on="on"
					/>
				</template>
			</FileUpload>
		</div>

		<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_ARCHIVE_PROJECT') }}
		</label>
		<small>
			{{ $t('PROJECT_SETTINGS_GENERAL_ARCHIVE_PROJECT_DESC') }}
		</small>

		<w-button
			outline
			color="error"
			class="project-general__archive"
			@click="deletionDialog = true"
		>
			{{ $t('PROJECT_SETTINGS_GENERAL_ARCHIVE_PROJECT') }}
			<w-icon class="right">
				mdi mdi-delete
			</w-icon>
		</w-button>

		<!-- ANCHOR Deletion dialog -->
		<!-- NOTE Perhaps we want to think this through a bit more. Archive support may be possible-->
		<w-dialog
			v-model="deletionDialog"
			dialog-class="rounded-xl"
			width="350"
		>
			<section-title icon="mdi mdi-delete" class="text-red-400 dark:text-red-400">
				Close project
			</section-title>

			<div class="my-4">
				<p class="text-dark mb-1">
					Are you sure you want to continue?
				</p>
				<small class="text-gray-500">
					Closing this project will lock it from further modifications
					and will no longer appear in projects lists.
				</small>
			</div>
			<div class="flex">
				<w-button
					class="mx-0"
					color="gray-700"
					text
					:disabled="deletionActive"
					@click="deletionDialog = false"
				>
					<w-icon class="pr-2">
						mdi mdi-arrow-left
					</w-icon>
					Back
				</w-button>
				<spacer />
				<w-button
					class="mx-0 text-red-400"
					bg-color="white"
					text
					:loading="deletionActive"
					@click="deleteProject"
				>
					Close
				</w-button>
			</div>
		</w-dialog>
	</section>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({

	props: {
		project: Object
	},

	data: () => ({
		original: null as any,
		projectCoverPreview: '',
		deletionDialog: false,
		deletionActive: 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 = '';
		},

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

		async deleteProject() {
			this.deletionActive = true;

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

			this.$router.push('/');
		}

	}
});
</script>

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

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

	&__palette {
		@include padding(2, t);

		display: flex;
		gap: 0.5rem;
	}

	&__palette-color {
		@include rounded(full);
		@include transition(transform);
	
		width: 2.75rem;
		height: 1.25rem;
		cursor: pointer;

		&:hover {
			transform: scale(1.05);
		}
	}

	&__cover {
		width: 13rem;
		position: relative;
	}

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

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

	&__cover-upload {
		position: absolute;
		bottom: -1.25rem;
		right: -1.25rem;
	}

	// appending .w-button fixes prioritization
	&__cover-option.w-button {
		@include rounded(full);

		width: 2.75rem;
		height: 2.75rem;
		box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
	}

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