<script lang="ts" setup>
// types

type Props = {
    description: string;
};

// props

defineProps<Props>();

// state

const descriptionEl = ref<HTMLDivElement | null>(null);
const descriptionElScrollHeight = ref(0);
const isDescriptionCollapsed = ref(true);

const descriptionMaxHeight = 200;

// watch

watch(
    () => descriptionEl.value?.scrollHeight,
    (nv) => {
        descriptionElScrollHeight.value = nv ?? 0;
    },
    {
        immediate: true,
    }
);
</script>

<template>
    <div
        :class="descriptionElScrollHeight > descriptionMaxHeight ? 'mb-20' : ''"
        class="relative"
    >
        <div
            ref="descriptionEl"
            :class="
                descriptionElScrollHeight > descriptionMaxHeight && isDescriptionCollapsed
                    ? 'mask-b-from-20% mask-b-to-90% overflow-y-hidden max-h-[300px] select-none'
                    : ''
            "
            class="py-8 leading-[200%] max-sm:text-sm text-slate-500 text-justify [&_a]:text-blue-400 [&_strong]:font-bold [&_u]:text-red-400"
            v-html="description"
        />
        <div
            v-if="descriptionElScrollHeight > descriptionMaxHeight"
            :class="isDescriptionCollapsed ? 'absolute' : ''"
            class="bottom-0 inset-x-0 flex items-center"
        >
            <button
                @click="isDescriptionCollapsed = !isDescriptionCollapsed"
                variant="ghost"
                size="md"
                class="rounded-full max-xs:typo-label-sm flex items-center justify-center gap-1.5"
            >
                {{ isDescriptionCollapsed ? "نمایش بیشتر" : "نمایش کمتر" }}
                <Icon
                    name="ci:chevron-left"
                    size="16"
                />
            </button>
        </div>
    </div>
</template>
