<template>
	<CollapsibleRoot :disabled="disabled" :defaultOpen="fold === true || fold === undefined" class="callout group overflow-hidden my-4 p-3 ps-4 bg-blend-lighten !bg-opacity-25 border-l-4 inline-block pe-8 bg-light-blue dark:bg-dark-blue" :data-type="type">
		<CollapsibleTrigger>
			<div :class="{ 'cursor-pointer': fold !== undefined }" class="flex flex-row items-center justify-start ps-2">
				<Icon :icon="calloutIconByType[type] ?? defaultCalloutIcon" class="w-6 h-6 stroke-2 float-start me-2" />
				<span v-if="title" class="block font-bold">{{ title }}</span>
				<Icon icon="radix-icons:caret-right" v-if="fold !== undefined" class="transition-transform group-data-[state=open]:rotate-90 w-6 h-6 mx-6" />
			</div>
		</CollapsibleTrigger>
        <CollapsibleContent class="overflow-hidden data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out] data-[state=closed]:h-0">
			<div class="px-2">
				<slot />
			</div>
        </CollapsibleContent>
    </CollapsibleRoot>
</template>

<script lang="ts">
const calloutIconByType: Record<string, string> = {
	note: 'radix-icons:pencil-1',
	abstract: 'radix-icons:file-text',
	info: 'radix-icons:info-circled',
	todo: 'radix-icons:check-circled',
	tip: 'radix-icons:star',
	success: 'radix-icons:check',
	question: 'radix-icons:question-mark-circled',
	warning: 'radix-icons:exclamation-triangle',
	failure: 'radix-icons:cross-circled',
	danger: 'radix-icons:circle-backslash',
	bug: 'solar:bug-linear',
	example: 'radix-icons:list-bullet',
	quote: 'radix-icons:quote',
};
const defaultCalloutIcon = 'radix-icons:info-circled';
</script>

<script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue/dist/iconify.js';
const {	type, title, fold } = defineProps<{
	type: string;
	title?: string;
	fold?: boolean;
}>();
const disabled = computed(() => fold === undefined);
</script>

<style>
.callout[data-type="abstract"],
.callout[data-type="summary"],
.callout[data-type="tldr"]
{
	@apply bg-light-cyan;
	@apply dark:bg-dark-cyan;
	@apply text-light-cyan;
	@apply dark:text-dark-cyan;
}
.callout[data-type="info"]
{
	@apply bg-light-blue;
	@apply dark:bg-dark-blue;
	@apply text-light-blue;
	@apply dark:text-dark-blue;
}
.callout[data-type="todo"]
{
	@apply bg-light-blue;
	@apply dark:bg-dark-blue;
	@apply text-light-blue;
	@apply dark:text-dark-blue;
}
.callout[data-type="important"]
{
	@apply bg-light-cyan;
	@apply dark:bg-dark-cyan;
	@apply text-light-cyan;
	@apply dark:text-dark-cyan;
}
.callout[data-type="tip"],
.callout[data-type="hint"]
{
	@apply bg-light-cyan;
	@apply dark:bg-dark-cyan;
	@apply text-light-cyan;
	@apply dark:text-dark-cyan;
}
.callout[data-type="success"],
.callout[data-type="check"],
.callout[data-type="done"]
{
	@apply bg-light-green;
	@apply dark:bg-dark-green;
	@apply text-light-green;
	@apply dark:text-dark-green;
}
.callout[data-type="question"],
.callout[data-type="help"],
.callout[data-type="faq"]
{
	@apply bg-light-orange;
	@apply dark:bg-dark-orange;
	@apply text-light-orange;
	@apply dark:text-dark-orange;
}
.callout[data-type="warning"],
.callout[data-type="caution"],
.callout[data-type="attention"]
{
	@apply bg-light-orange;
	@apply dark:bg-dark-orange;
	@apply text-light-orange;
	@apply dark:text-dark-orange;
}
.callout[data-type="failure"],
.callout[data-type="fail"],
.callout[data-type="missing"]
{
	@apply bg-light-red;
	@apply dark:bg-dark-red;
	@apply text-light-red;
	@apply dark:text-dark-red;
}
.callout[data-type="danger"],
.callout[data-type="error"]
{
	@apply bg-light-red;
	@apply dark:bg-dark-red;
	@apply text-light-red;
	@apply dark:text-dark-red;
}
.callout[data-type="bug"]
{
	@apply bg-light-red;
	@apply dark:bg-dark-red;
	@apply text-light-red;
	@apply dark:text-dark-red;
}
.callout[data-type="example"]
{
	@apply bg-light-purple;
	@apply dark:bg-dark-purple;
	@apply text-light-purple;
	@apply dark:text-dark-purple;
}

</style>