<script setup lang="ts">
import { nextTick, useTemplateRef } from 'vue'
import { ScrollbarInst } from 'naive-ui'
import MessageItem from './message-item.vue'
import type { MessageItemInterface } from '../types'

interface Props {
  messageList: Map<string, MessageItemInterface>
}

defineProps<Props>()

defineExpose({
  scrollToBottom,
})

const scrollbarRef = useTemplateRef<ScrollbarInst | null>('scrollbarRef')

function scrollToBottom() {
  nextTick(() => {
    if (scrollbarRef.value) {
      scrollbarRef.value.scrollTo({ top: 999999999, behavior: 'smooth' })
    }
  })
}
</script>

<template>
  <div class="relative flex-1 overflow-hidden overflow-y-auto py-[20px]">
    <n-scrollbar ref="scrollbarRef" class="min-h-full" content-class="min-h-full flex">
      <div class="flex flex-col-reverse overflow-hidden">
        <div class="pr-[10px]">
          <MessageItem v-for="[key, messageItem] in messageList" :key="key" :message-item="messageItem" />
        </div>
      </div>
    </n-scrollbar>
  </div>
</template>
