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

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

defineProps<Props>()

defineExpose({
  scrollToBottom,
})

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

const isShowEditorDrawer = ref(false)
const contentEdit = ref('')

function scrollToBottom() {
  if (scrollbarRef.value) {
    scrollbarRef.value.scrollTo({ top: 999999999, behavior: 'smooth' })
  }
}

function onContentedit(content: string) {
  contentEdit.value = content

  isShowEditorDrawer.value = true
}
</script>

<template>
  <div class="flex-1 overflow-hidden overflow-y-auto py-[20px]">
    <n-scrollbar ref="scrollbarRef">
      <div class="mx-auto w-[750px] pr-[10px]">
        <MessageItem
          v-for="[key, messageItem] in messageList"
          :key="key"
          :message-item="messageItem"
          @contentedit="onContentedit"
        />
      </div>
    </n-scrollbar>

    <EditorDrawer v-model:is-show-editor-drawer="isShowEditorDrawer" v-model:content-edit="contentEdit" />
  </div>
</template>
