timeline-frontend/src/pages/story/components/TimelineItem/TimelineItem.tsx

import TimelineImage from '@/components/TimelineImage';
import { StoryItem } from '@/pages/story/data';
import {
  DeleteOutlined,
  DownOutlined,
  EditOutlined,
  UpOutlined,
} from '@ant-design/icons';
import { useIntl, useRequest } from '@umijs/max';
import { Button, Card, message, Popconfirm } from 'antd';
import React, { useState } from 'react';
import { queryStoryItemImages, removeStoryItem } from '../../service';
import TimelineItemDrawer from '../TimelineItemDrawer';
import useStyles from './index.style';

const TimelineItem: React.FC<{
  item: StoryItem;
  handleOption: (item: StoryItem, option: 'add' | 'edit' | 'addSubItem' | 'editSubItem') => void;
  refresh: () => void;
}> = ({ item, handleOption, refresh }) => {
  const { styles } = useStyles();
  const intl = useIntl();
  const [expanded, setExpanded] = useState(false);
  const [showActions, setShowActions] = useState(false);
  const [subItemsExpanded, setSubItemsExpanded] = useState(false);
  const [openDetail, setOpenDetail] = useState(false);
  const { data: imagesList } = useRequest(async () => {
    return await queryStoryItemImages(item.instanceId);
  });
  const handleDelete = async () => {
    try {
      if (!item.instanceId) return;
      const response = await removeStoryItem(item.instanceId);
      if (response.code === 200) {
        message.success(intl.formatMessage({ id: 'story.deleteSuccess' }));
        refresh();
      } else {
        message.error(intl.formatMessage({ id: 'story.deleteFailed' }));
      }
    } catch (error) {
      message.error(intl.formatMessage({ id: 'story.deleteFailed' }));
    }
  };
  const toggleDescription = () => {
    setExpanded(!expanded);
  };

  const toggleSubItems = () => {
    setSubItemsExpanded(!subItemsExpanded);
  };

  const displayedDescription = expanded
    ? item.description
    : item.description?.substring(0, 100) +
      (item.description && item.description.length > 100 ? '...' : '');

  return (
    <Card
      className={styles.timelineItem}
      title={item.title}
      onMouseEnter={() => setShowActions(true)}
      onMouseLeave={() => setShowActions(false)}
      extra={
        <div className={styles.actions}>
          {showActions && (
            <>
              <Button
                type="text"
                icon={<EditOutlined />}
                onClick={(e) => {
                  e.stopPropagation();
                  handleOption(item, 'edit');
                }}
                aria-label={intl.formatMessage({ id: 'story.edit' })}
              />
              {/*<Button
                type="text"
                icon={<PlusOutlined />}
                onClick={(e) => {
                  e.stopPropagation();
                  handleOption(item, 'addSubItem');
                }}
                aria-label={intl.formatMessage({ id: 'story.addSubItem' })}
              />*/}
              <Popconfirm
                title={intl.formatMessage({ id: 'story.deleteConfirm' })}
                description={intl.formatMessage({ id: 'story.deleteConfirmDescription' })}
                onConfirm={(e) => {
                  e?.stopPropagation();
                  handleDelete();
                }}
                okText={intl.formatMessage({ id: 'story.yes' })}
                cancelText={intl.formatMessage({ id: 'story.no' })}
              >
                <Button
                  type="text"
                  icon={<DeleteOutlined />}
                  danger
                  onClick={(e) => e.stopPropagation()}
                  aria-label={intl.formatMessage({ id: 'story.delete' })}
                />
              </Popconfirm>
            </>
          )}
        </div>
      }
      // onClick={() => onDetail(item)}
      hoverable
    >
      <div className={styles.content}>
        <div className={styles.date} onClick={() => setOpenDetail(true)}>
          {item.storyItemTime} {item.location ? `创建于${item.location}` : ''}
        </div>
        <div className={styles.description} onClick={() => setOpenDetail(true)}>
          {displayedDescription}
          {item.description && item.description.length > 100 && (
            <Button
              type="link"
              onClick={(e) => {
                e.stopPropagation();
                toggleDescription();
              }}
            >
              {expanded
                ? intl.formatMessage({ id: 'story.showLess' })
                : intl.formatMessage({ id: 'story.showMore' })}
            </Button>
          )}
        </div>
        {imagesList && imagesList.length > 0 && (
          <>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginBottom: '20px' }}>
              {imagesList.map((imageInstanceId, index) => (
                <TimelineImage
                  key={imageInstanceId + index}
                  title={imageInstanceId}
                  imageInstanceId={imageInstanceId}
                />
              ))}
            </div>
          </>
        )}
        {item.subItems && item.subItems.length > 0 && (
          <div className={styles.subItems}>
            <div
              className={styles.subItemsHeader}
              onClick={(e) => {
                e.stopPropagation();
                toggleSubItems();
              }}
            >
              <span>
                {intl.formatMessage({ id: 'story.subItems' })} ({item.subItems.length})
              </span>
              {subItemsExpanded ? <UpOutlined /> : <DownOutlined />}
            </div>
            {subItemsExpanded && (
              <div className={styles.subItemsList}>
                {item.subItems.map((subItem) => (
                  <div key={subItem.id} className={styles.subItem}>
                    <div className={styles.subItemDate}>
                      {item.storyItemTime} {item.location ? `创建于${item.location}` : ''}
                    </div>
                    <div className={styles.subItemContent}>{subItem.description}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>
      <TimelineItemDrawer storyItem={item} open={openDetail} setOpen={setOpenDetail} />
    </Card>
  );
};

export default TimelineItem;