// src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js
// 事件详情滚动面板组件

import React from 'react';
import { Box, Center, VStack, Text } from '@chakra-ui/react';
import DynamicNewsDetailPanel from '../DynamicNewsDetail';

/**
 * 事件详情滚动面板
 * 带自定义滚动条样式的事件详情容器
 *
 * @param {Object} selectedEvent - 当前选中的事件
 * @param {string} scrollbarTrackBg - 滚动条轨道背景色
 * @param {string} scrollbarThumbBg - 滚动条滑块背景色
 * @param {string} scrollbarThumbHoverBg - 滚动条滑块悬浮背景色
 * @param {string} detailMode - 详情模式：'full' | 'no-header'（默认 'full'）
 * @param {boolean} showHeader - 是否显示头部（可选，优先级高于 detailMode）
 */
const EventDetailScrollPanel = ({
  selectedEvent,
  scrollbarTrackBg,
  scrollbarThumbBg,
  scrollbarThumbHoverBg,
  detailMode = 'full',
  showHeader,
}) => {
  // 计算是否显示头部：showHeader 显式指定时优先，否则根据 detailMode 判断
  const shouldShowHeader = showHeader !== undefined
    ? showHeader
    : detailMode === 'full';
  return (
    <Box
      pl={2}
      position="relative"
      data-detail-panel-container="true"
      sx={{
        height: '100%',
        overflowY: 'auto',
        overflowX: 'hidden',
        overscrollBehavior: 'contain',
        '&::-webkit-scrollbar': {
          width: '3px',
        },
        '&::-webkit-scrollbar-track': {
          background: scrollbarTrackBg,
          borderRadius: '10px',
        },
        '&::-webkit-scrollbar-thumb': {
          background: scrollbarThumbBg,
          borderRadius: '10px',
        },
        '&::-webkit-scrollbar-thumb:hover': {
          background: scrollbarThumbHoverBg,
        },
      }}
    >
      {selectedEvent ? (
        <DynamicNewsDetailPanel event={selectedEvent} showHeader={shouldShowHeader} />
      ) : (
        <Center h="100%" minH="400px">
          <VStack spacing={4}>
            <Text fontSize="lg" color="gray.500">
              请选择左侧事件查看详情
            </Text>
          </VStack>
        </Center>
      )}
    </Box>
  );
};

export default EventDetailScrollPanel;