import { Typography, Space, Skeleton } from 'antd';
import { FileOutlined } from '@ant-design/icons';
import DashboardCard from '@web/src/components/presentation/dashboard-card';
import ActivityItem from './ActivityItem';
import { useDashboardContext } from '../DashboardContext';
import { ShareCodeResponse } from '../../quick-file/quickFileContext';
import { useNavigate } from 'react-router-dom';
const { Title, Text } = Typography;
export default function Activate() {
    const { shareCodeList, isShareCodeListLoading } = useDashboardContext();
    const navigate = useNavigate()
    const handleClick = (item: ShareCodeResponse) => {
        navigate(`/manage/share-code?keyword=${encodeURIComponent(item.code)}`)
    }
    return <>
        <div className="mt-6">
            <Title level={4} className="mb-4">最新上传活动</Title>
            <DashboardCard className="w-full">
                <Space direction="vertical" className="w-full" size="middle">
                    {isShareCodeListLoading ?
                        <Skeleton active />
                        :
                        shareCodeList.map((item) => (
                            <div className='my-1 cursor-pointer' onClick={() => handleClick(item)}>
                                <ActivityItem
                                    key={item.id}
                                    icon={<FileOutlined className="text-blue-500" />}
                                    time={item.createdAt?.toLocaleString()}
                                    ip={item.uploadIp}
                                    filename={item.fileName}
                                    filesize={Math.max(Number(item.resource.meta.size) / 1024 / 1024, 0.01).toFixed(2)}
                                    code={item.code}
                                />
                            </div>
                        ))}
                </Space>
            </DashboardCard>
        </div>
    </>
}