<template>
	<div
		class="group/note flex w-full cursor-pointer flex-col gap-4 bg-secondary px-4 py-2"
		v-auto-animate
		@click="toggleDetail()">
		<div class="flex items-center">
			<div class="w-full text-center text-2xl font-bold">
				{{ props.title }}
			</div>
			<div class="flex flex-col">
				<ElementButton @click.stop="toggleOptions()">
					<Icon name="fa6-solid:ellipsis-vertical" />
				</ElementButton>
				<div class="relative">
					<div
						ref="contextMenu"
						v-if="showOptions">
						<div
							class="absolute right-0 top-0 z-50 flex h-fit w-64 flex-col border border-lightgray bg-secondary">
							<CardOptions
								name="View Note"
								@click.stop="noteDetail(props.uuid)" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div
			v-if="showDetail"
			class="mb-2 line-clamp-6 whitespace-pre">
			{{ props.description }}
		</div>
	</div>
</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>
