<template>
	<div class="attachments">
		<h3>
			<span class="icon is-grey">
				<Icon icon="paperclip" />
			</span>
			{{ $t('task.attachment.title') }}
		</h3>

		<input
			v-if="editEnabled"
			id="files"
			ref="filesRef"
			:disabled="loading || undefined"
			multiple
			type="file"
			@change="uploadNewAttachment()"
		>

		<ProgressBar
			v-if="attachmentService.uploadProgress > 0"
			:value="attachmentService.uploadProgress * 100"
			is-primary
		/>

		<div
			v-if="attachments.length > 0"
			class="files"
		>
			<button
				v-for="a in attachments"
				:key="a.id"
				class="attachment"
				@click="viewOrDownload(a)"
			>
				<div class="preview-column">
					<FilePreview
						class="attachment-preview"
						:model-value="a"
					/>
				</div>
				<div class="attachment-info-column">
					<div class="filename">
						{{ a.file.name }}
						<span
							v-if="task.coverImageAttachmentId === a.id"
							class="is-task-cover"
						>
							{{ $t('task.attachment.usedAsCover') }}
						</span>
					</div>
					<div class="info">
						<p class="attachment-info-meta">
							<i18n-t
								keypath="task.attachment.createdBy"
								scope="global"
							>
								<span v-tooltip="formatDateLong(a.created)">
									{{ formatDateSince(a.created) }}
								</span>
								<User
									:avatar-size="24"
									:user="a.createdBy"
									:is-inline="true"
								/>
							</i18n-t>
							<span>
								{{ getHumanSize(a.file.size) }}
							</span>
							<span v-if="a.file.mime">
								{{ a.file.mime }}
							</span>
						</p>
						<p>
							<BaseButton
								v-tooltip="$t('task.attachment.downloadTooltip')"
								class="attachment-info-meta-button"
								@click.prevent.stop="downloadAttachment(a)"
							>
								<Icon icon="download" />
							</BaseButton>
							<BaseButton
								v-tooltip="$t('task.attachment.copyUrlTooltip')"
								class="attachment-info-meta-button"
								@click.stop="copyUrl(a)"
							>
								<Icon icon="copy" />
							</BaseButton>
							<BaseButton
								v-if="editEnabled"
								v-tooltip="$t('task.attachment.deleteTooltip')"
								class="attachment-info-meta-button"
								@click.prevent.stop="setAttachmentToDelete(a)"
							>
								<Icon icon="trash-alt" />
							</BaseButton>
							<BaseButton
								v-if="editEnabled && canPreview(a)"
								v-tooltip="task.coverImageAttachmentId === a.id
									? $t('task.attachment.unsetAsCover')
									: $t('task.attachment.setAsCover')"
								class="attachment-info-meta-button"
								@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
							>
								<Icon :icon="task.coverImageAttachmentId === a.id ? 'eye-slash' : 'eye'" />
							</BaseButton>
						</p>
					</div>
				</div>
			</button>
		</div>

		<x-button
			v-if="editEnabled"
			:disabled="loading"
			class="mb-4"
			icon="cloud-upload-alt"
			variant="secondary"
			:shadow="false"
			@click="filesRef?.click()"
		>
			{{ $t('task.attachment.upload') }}
		</x-button>

		<!-- Dropzone -->
		<Teleport to="body">
			<div
				v-if="editEnabled"
				:class="{ hidden: !isOverDropZone }"
				class="dropzone"
			>
				<div class="drop-hint">
					<div class="icon">
						<Icon icon="cloud-upload-alt" />
					</div>
					<div class="hint">
						{{ $t('task.attachment.drop') }}
					</div>
				</div>
			</div>
		</Teleport>

		<!-- Delete modal -->
		<Modal
			:enabled="attachmentToDelete !== null"
			@close="setAttachmentToDelete(null)"
			@submit="deleteAttachment()"
		>
			<template #header>
				<span>{{ $t('task.attachment.delete') }}</span>
			</template>

			<template #text>
				<p>
					{{ $t('task.attachment.deleteText1', {filename: attachmentToDelete.file.name}) }}<br>
					<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
				</p>
			</template>
		</Modal>

		<!-- Attachment image modal -->
		<Modal
			:enabled="attachmentImageBlobUrl !== null"
			@close="attachmentImageBlobUrl = null"
		>
			<img
				:src="attachmentImageBlobUrl"
				alt=""
			>
		</Modal>
	</div>
</template>

<script setup lang="ts">
import {ref, shallowReactive, computed} from 'vue'
import {useDropZone} from '@vueuse/core'

import User from '@/components/misc/User.vue'
import ProgressBar from '@/components/misc/ProgressBar.vue'
import BaseButton from '@/components/base/BaseButton.vue'

import AttachmentService from '@/services/attachment'
import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
import type {IAttachment} from '@/modelTypes/IAttachment'
import type {ITask} from '@/modelTypes/ITask'

import {useAttachmentStore} from '@/stores/attachments'
import {formatDateSince, formatDateLong} from '@/helpers/time/formatDate'
import {uploadFiles, generateAttachmentUrl} from '@/helpers/attachments'
import {getHumanSize} from '@/helpers/getHumanSize'
import {useCopyToClipboard} from '@/composables/useCopyToClipboard'
import {error, success} from '@/message'
import {useTaskStore} from '@/stores/tasks'
import {useI18n} from 'vue-i18n'
import FilePreview from '@/components/tasks/partials/FilePreview.vue'

const {
	task,
	editEnabled = true,
} = defineProps<{
	task: ITask,
	editEnabled: boolean,
}>()
// FIXME: this should go through the store
const emit = defineEmits(['taskChanged'])
const taskStore = useTaskStore()
const {t} = useI18n({useScope: 'global'})

const attachmentService = shallowReactive(new AttachmentService())

const attachmentStore = useAttachmentStore()
const attachments = computed(() => attachmentStore.attachments)

const loading = computed(() => attachmentService.loading || taskStore.isLoading)

function onDrop(files: File[] | null) {
	if (files && files.length !== 0) {
		uploadFilesToTask(files)
	}
}

const {isOverDropZone} = useDropZone(document, onDrop)

function downloadAttachment(attachment: IAttachment) {
	attachmentService.download(attachment)
}

const filesRef = ref<HTMLInputElement | null>(null)

function uploadNewAttachment() {
	const files = filesRef.value?.files

	if (!files || files.length === 0) {
		return
	}

	uploadFilesToTask(files)
}

function uploadFilesToTask(files: File[] | FileList) {
	uploadFiles(attachmentService, task.id, files)
}

const attachmentToDelete = ref<IAttachment | null>(null)

function setAttachmentToDelete(attachment: IAttachment | null) {
	attachmentToDelete.value = attachment
}

async function deleteAttachment() {
	if (attachmentToDelete.value === null) {
		return
	}

	try {
		const r = await attachmentService.delete(attachmentToDelete.value)
		attachmentStore.removeById(attachmentToDelete.value.id)
		success(r)
		setAttachmentToDelete(null)
	} catch (e) {
		error(e)
	}
}

const attachmentImageBlobUrl = ref<string | null>(null)

async function viewOrDownload(attachment: IAttachment) {
	if (canPreview(attachment)) {
		attachmentImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
	} else {
		downloadAttachment(attachment)
	}
}

function canPreview(attachment: IAttachment): boolean {
	return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.toLowerCase().endsWith(suffix))
}

const copy = useCopyToClipboard()

function copyUrl(attachment: IAttachment) {
	copy(generateAttachmentUrl(task.id, attachment.id))
}

async function setCoverImage(attachment: IAttachment | null) {
	const updatedTask = await taskStore.setCoverImage(task, attachment)
	emit('taskChanged', updatedTask)
	success({message: t('task.attachment.successfullyChangedCoverImage')})
}
</script>

<style lang="scss" scoped>
.attachments {
	input[type=file] {
		display: none;
	}

	@media screen and (max-width: $tablet) {
		.button {
			width: 100%;
		}
	}
}

.files {
	margin-bottom: 1rem;
}

.attachment {
	display: grid;
	grid-template-columns: 9rem 1fr;
	align-items: center;
	width: 100%;
	
	padding: .5rem;
	
	transition: background-color $transition;
	background-color: transparent;
	
	border: transparent;
	border-radius: $radius;

	&:hover {
		background-color: var(--grey-200);
	}
}

.filename {
	display: flex;
	align-items: center;
	font-weight: bold;
	height: 2rem;
	color: var(--text);
}

.info {
	color: var(--grey-500);
	font-size: .9rem;
	display: flex;
	flex-direction: column;

	p {
		margin-bottom: 0;
		display: flex;

		> span,
		> button:not(:last-child):after {
			padding: 0 .25rem;
		}
	}
}

.dropzone {
	position: fixed;
	background: hsla(var(--grey-100-hsl), 0.8);
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 100;
	text-align: center;

	&.hidden {
		display: none;
	}
}

.drop-hint {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;

	.icon {
		width: 100%;
		font-size: 5rem;
		height: auto;
		text-shadow: var(--shadow-md);
		animation: bounce 2s infinite;

		@media (prefers-reduced-motion: reduce) {
			animation: none;
		}
	}

	.hint {
		margin: .5rem auto 2rem;
		border-radius: $radius;
		box-shadow: var(--shadow-md);
		background: var(--primary);
		padding: 1rem;
		color: $white; // Should always be white because of the background, regardless of the theme
		width: 100%;
		max-width: 300px;
	}
}

.attachment-info-column {
	display: flex;
	flex-flow: column wrap;
	align-self: start;
}

.attachment-info-meta {
	display: flex;
	align-items: center;

	:deep(.user) {
		display: flex !important;
		align-items: center;
		margin: 0 .5rem;
	}

	@media screen and (max-width: $mobile) {
		flex-direction: column;
		align-items: flex-start;

		:deep(.user) {
			margin: .5rem 0;
		}

		> span:not(:last-child):after,
		> button:not(:last-child):after {
			display: none;
		}

		.user .username {
			display: none;
		}
	}
}

.attachment-info-meta-button {
	color: var(--link);
	padding: 0 .25rem;
}

@keyframes bounce {
	from,
	20%,
	53%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -30px, 0);
	}

	70% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -15px, 0);
	}

	90% {
		transform: translate3d(0, -4px, 0);
	}
}

.preview-column {
	max-width: 8rem;
	height: 5.2rem;
}

.attachment-preview {
	height: 100%;
}

.is-task-cover {
	background: var(--primary);
	color: var(--white);
	margin-left: .25rem;
	padding: .25rem .35rem;
	border-radius: 4px;
	font-size: .75rem;
}
</style>