<template>
	<div class="content has-text-centered">
		<h2 v-if="salutation">{{ salutation }}</h2>

		<message variant="danger" v-if="deletionScheduledAt !== null" class="mb-4">
			{{
				$t('user.deletion.scheduled', {
					date: formatDateShort(deletionScheduledAt),
					dateSince: formatDateSince(deletionScheduledAt),
				})
			}}
			<router-link :to="{name: 'user.settings', hash: '#deletion'}">
				{{ $t('user.deletion.scheduledCancel') }}
			</router-link>
		</message>
		<add-task
			@taskAdded="updateTaskKey"
			class="is-max-width-desktop"
		/>
		<template v-if="!hasTasks && !loading">
			<template v-if="defaultNamespaceId > 0">
				<p class="mt-4">{{ $t('home.project.newText') }}</p>
				<x-button
					:to="{ name: 'project.create', params: { namespaceId: defaultNamespaceId } }"
					:shadow="false"
					class="ml-2"
				>
					{{ $t('home.project.new') }}
				</x-button>
			</template>
			<p class="mt-4" v-if="migratorsEnabled">
				{{ $t('home.project.importText') }}
			</p>
			<x-button
				v-if="migratorsEnabled"
				:to="{ name: 'migrate.start' }"
				:shadow="false">
				{{ $t('home.project.import') }}
			</x-button>
		</template>
		<div v-if="projectHistory.length > 0" class="is-max-width-desktop has-text-left mt-4">
			<h3>{{ $t('home.lastViewed') }}</h3>
			<ProjectCardGrid :projects="projectHistory" v-cy="'projectCardGrid'" />
		</div>
		<ShowTasks
			v-if="hasProjects"
			class="show-tasks"
			:key="showTasksKey"
		/>
	</div>
</template>

<script lang="ts" setup>
import {ref, computed} from 'vue'

import Message from '@/components/misc/message.vue'
import ShowTasks from '@/views/tasks/ShowTasks.vue'
import ProjectCardGrid from '@/components/project/partials/ProjectCardGrid.vue'
import AddTask from '@/components/tasks/add-task.vue'

import {getHistory} from '@/modules/projectHistory'
import {parseDateOrNull} from '@/helpers/parseDateOrNull'
import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
import {useDaytimeSalutation} from '@/composables/useDaytimeSalutation'

import {useBaseStore} from '@/stores/base'
import {useProjectStore} from '@/stores/projects'
import {useConfigStore} from '@/stores/config'
import {useNamespaceStore} from '@/stores/namespaces'
import {useAuthStore} from '@/stores/auth'
import {useTaskStore} from '@/stores/tasks'
import type {IProject} from '@/modelTypes/IProject'

const salutation = useDaytimeSalutation()

const baseStore = useBaseStore()
const authStore = useAuthStore()
const configStore = useConfigStore()
const namespaceStore = useNamespaceStore()
const projectStore = useProjectStore()
const taskStore = useTaskStore()

const projectHistory = computed(() => {
	// If we don't check this, it tries to load the project background right after logging out	
	if(!authStore.authenticated) {
		return []
	}
	
	return getHistory()
		.map(l => projectStore.getProjectById(l.id))
		.filter((l): l is IProject => l !== null)
})

const migratorsEnabled = computed(() => configStore.availableMigrators?.length > 0)
const hasTasks = computed(() => baseStore.hasTasks)
const defaultNamespaceId = computed(() => namespaceStore.namespaces?.[0]?.id || 0)
const hasProjects = computed(() => namespaceStore.namespaces?.[0]?.projects.length > 0)
const loading = computed(() => taskStore.isLoading)
const deletionScheduledAt = computed(() => parseDateOrNull(authStore.info?.deletionScheduledAt))

// This is to reload the tasks list after adding a new task through the global task add.
// FIXME: Should use pinia (somehow?)
const showTasksKey = ref(0)

function updateTaskKey() {
	showTasksKey.value++
}
</script>

<style scoped lang="scss">
.show-tasks {
	margin-top: 2rem;
}
</style>