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

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

defineProps<Props>()
const emit = defineEmits<{
  updateSpecifyMessageItem: [messageId: string, newMessageItem: Partial<MessageItemInterface>]
}>()

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

const isNotShowBackBottomBtn = useElementVisibility(backBottomBtnFlagRef)

provide('updateSpecifyMessageItem', {
  updateSpecifyMessageItem: (messageId: string, newMessageItem: Partial<MessageItemInterface>) => {
    emit('updateSpecifyMessageItem', messageId, newMessageItem)
  },
})

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
}

const handleBackBottom = throttle(() => {
  scrollToBottom()
}, 500)

defineExpose({
  scrollToBottom,
  isNotShowBackBottomBtn,
})
</script>

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

        <div ref="backBottomBtnFlagRef" class="-z-1 absolute bottom-0 h-[40px] w-full"></div>
      </div>
    </n-scrollbar>

    <Transition name="back-bottom-btn" mode="out-in">
      <div
        v-show="!isNotShowBackBottomBtn"
        class="absolute bottom-[30px] left-1/2 w-[750px] text-end"
        style="translate: calc(-50% + 30px)"
      >
        <button
          class="flex-center flex-center inline-flex h-[26px] w-[26px] rounded-full bg-[#ECEFFF]"
          @click="handleBackBottom"
        >
          <i class="iconfont icon-huidaodibu text-[12px]" />
        </button>
      </div>
    </Transition>

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

<style lang="scss" scoped>
.back-bottom-btn-enter-active,
.back-bottom-btn-leave-active {
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  transition-property: opacity;
}

.back-bottom-btn-enter-from,
.back-bottom-btn-leave-to {
  opacity: 0;
}
</style>
