'use client';
import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
import Message from './Message';
import { useRef, useState } from 'react';
import { ScrollTobottom } from '@/assets/chatacter';

const messages = [
  {
    id: 1,
    content: 'Hello, how are you?',
    sender: 'user',
  },
  {
    id: 2,
    content: 'I am fine, thank you!',
    sender: 'assistant',
  },
  {
    id: 3,
    content:
      'What is your name? What is your name?What is your name?What is your name?What is your name?What is your name?What is your name?',
    sender: 'user',
  },
  {
    id: 4,
    content: 'My name is John Doe.',
    sender: 'assistant',
  },
  {
    id: 5,
    content:
      'What is your name? What is your name?What is your name?What is your name?What is your name?What is your name?What is your name?',
    sender: 'user',
  },
  {
    id: 6,
    content: 'My name is John Doe.',
    sender: 'assistant',
  },
  {
    id: 7,
    content:
      'What is your name? What is your name?What is your name?What is your name?What is your name?What is your name?What is your name?',
    sender: 'user',
  },
  {
    id: 8,
    content: 'My name is John Doe.',
    sender: 'assistant',
  },
  {
    id: 9,
    content:
      'What is your name? What is your name?What is your name?What is your name?What is your name?What is your name?What is your name?',
    sender: 'user',
  },
  {
    id: 10,
    content: 'My name is John Doe.',
    sender: 'assistant',
  },
  {
    id: 11,
    content:
      'What is your name? What is your name?What is your name?What is your name?What is your name?What is your name?What is your name?',
    sender: 'user',
  },
  {
    id: 12,
    content: 'My name is John Doe.',
    sender: 'assistant',
  },
  {
    id: 13,
    content:
      'What is your name? What is your name?What is your name?What is your name?What is your name?What is your name?What is your name?',
    sender: 'user',
  },
  {
    id: 14,
    content: 'My name is John Doe.',
    sender: 'assistant',
  },
  {
    id: 15,
    content:
      'What is your name? What is your name?What is your name?What is your name?What is your name?What is your name?What is your name?',
    sender: 'user',
  },
  {
    id: 16,
    content: 'My name is John Doe.',
    sender: 'assistant',
  },
  {
    id: 17,
    content:
      'What is your name? What is your name?What is your name?What is your name?What is your name?What is your name?What is your name?',
    sender: 'user',
  },
  {
    id: 18,
    content: 'My name is John Doe.',
    sender: 'assistant',
  },
  {
    id: 19,
    content:
      'What is your name? What is your name?What is your name?What is your name?What is your name?What is your name?What is your name?',
    sender: 'user',
  },
  {
    id: 20,
    content: 'My name is John Doe.',
    sender: 'assistant',
  },
];

// 普通模式聊天内容展示框
export default function ChatMessageList() {
  const virtuosoRef = useRef<VirtuosoHandle>(null);
  const [showScrollButton, setShowScrollButton] = useState(false);

  // 滚动到最新消息
  const scrollToBottom = () => {
    virtuosoRef.current?.scrollToIndex({
      index: messages.length - 1,
      behavior: 'smooth',
    });
  };

  return (
    <div
      style={{ position: 'relative', height: '100%', marginBottom: '2.5rem' }}
      className="hide-scrollbar"
    >
      <Virtuoso
        ref={virtuosoRef}
        style={{ height: '100%' }}
        data={messages}
        alignToBottom
        followOutput="smooth"
        initialTopMostItemIndex={messages.length - 1}
        atBottomStateChange={(atBottom) => {
          // 当不在底部时显示按钮，在底部时隐藏
          setShowScrollButton(!atBottom);
        }}
        itemContent={(index, item) => (
          <Message
            item={item}
            index={index}
            isLast={index === messages.length - 1}
          />
        )}
      />

      {/* 回到底部按钮 */}
      {showScrollButton && (
        <div
          onClick={scrollToBottom}
          className="absolute -right-1 bottom-0 z-10 flex h-10 w-10 items-center justify-center rounded-full hover:scale-110 hover:cursor-pointer"
        >
          <ScrollTobottom />
        </div>
      )}
    </div>
  );
}
