import { useState, useEffect } from "react";
import { Button, Drawer, Empty } from "antd";
import { HistoryOutlined } from "@ant-design/icons";
import ShareCodeListCard from "../../code-manage/components/ShareCodeListCard";
import { ShareCodeResponse, useQuickFileContext } from "../../quick-file/quickFileContext";

export default function CodeRecord({ title, btnContent, recordName ,styles,isDownload}:
    { title: string, btnContent: string , recordName: string, styles?:string,isDownload?:boolean}) {
    const [open, setOpen] = useState(false);
    const [records, setRecords] = useState<ShareCodeResponse[]>([]);
    const {handleValidSuccess,saveCodeRecord,refetchShareCodeWithResource,setDownloadCode} = useQuickFileContext();
    
    const loadRecordsFromStorage = () => {
        const storedRecords = localStorage.getItem(recordName);
        if (storedRecords) {
            setRecords(JSON.parse(storedRecords));
        }
    };
    
    useEffect(() => {
        loadRecordsFromStorage();
    }, [recordName]);
    
    const saveAndUpdateRecord = (data: ShareCodeResponse, name: string) => {
        saveCodeRecord(data, name);
        if (name === recordName) {
            loadRecordsFromStorage();
        }
    };
    
    const handleOpen = () => {
        loadRecordsFromStorage();
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    const handleDelete = (id: string) => {
        const updatedRecords = records.filter(record => record.id !== id);
        setRecords(updatedRecords);
        localStorage.setItem(recordName, JSON.stringify(updatedRecords));
    };

    const handleDownload = async (code:string) => {
        await setDownloadCode(code)
        const {data:result} = await refetchShareCodeWithResource()
        console.log('下载', result);
        handleValidSuccess(result.resource.url, result.fileName);
        saveAndUpdateRecord(result as any as ShareCodeResponse, 'shareCodeDownloadRecords');
    };

    return (
        <>
            <Button
                type="primary"
                icon={<HistoryOutlined />}
                onClick={handleOpen}
                style={{ marginBottom: '16px' }}
            >
                {btnContent}
            </Button>
            <Drawer
                title={title}
                placement="right"
                width={420}
                onClose={handleClose}
                open={open}
            >
                {records.length > 0 ? (
                    <div className="space-y-4">
                        {records.map(item => (
                            <ShareCodeListCard
                                key={item.code}
                                item={item}
                                onDelete={handleDelete}
                                onDownload={isDownload ? handleDownload : undefined}
                            />
                        ))}
                    </div>
                ) : (
                    <Empty description="暂无分享码记录" />
                )}
            </Drawer>
        </>
    );
}