<template>
	<el-card>
		<template #header>
			<div
				class="flex cursor-pointer items-center"
				@click.stop="noteDetail(props.uuid)">
				<div class="w-full text-center text-2xl font-bold">
					{{ props.title }}
				</div>
			</div>
		</template>
		<div
			class="flex w-full cursor-pointer flex-col gap-4"
			v-auto-animate
			@click="toggleDetail()">
			<div
				v-if="showDetail"
				class="mb-2 line-clamp-6 whitespace-pre px-4 pt-2">
				{{ props.description }}
			</div>
			<div
				class="w-full px-4 py-2 text-center text-sm hover:bg-[--el-color-primary-light-9] hover:bg-opacity-50 hover:text-[--el-color-primary]"
				>{{ showDetail ? 'Hide Details' : 'Show Details' }}</div
			>
		</div>
	</el-card>
</template>

<script setup lang="ts">
interface Props {
	id: string | number
	uuid: string
	title: string
	description: string
}

const props = defineProps<Props>()
const showDetail = ref<boolean>(false)
const showOptions = ref<boolean>(false)

const contextMenu = ref()

const toggleOptions = () => {
	showOptions.value = !showOptions.value
}

const toggleDetail = () => {
	showDetail.value = !showDetail.value
}

const noteDetail = (id: string) => {
	navigateTo(`/notes/${id}`)
}

onClickOutside(contextMenu, (event) => {
	toggleOptions()
})
</script>

<style scoped>
:deep(.el-card__body) {
	--el-card-padding: 0;
}
</style>
