
import { ShareCodeGenerator } from "../sharecode/sharecodegenerator";
import { ShareCodeValidator } from "../sharecode/sharecodevalidator";
import { message, Tabs, Form, Spin, Alert } from "antd";
import { env } from '../../../env'
import { TusUploader } from "@web/src/components/common/uploader/TusUploader";
import { useState } from "react";
import CodeRecord from "../sharecode/components/CodeRecord";
const { TabPane } = Tabs;
export default function QuickUploadPage() {
    const [form] = Form.useForm();
    const uploadFileId = Form.useWatch(["file"], form)?.[0]
    const handleShareSuccess = (code: string) => {
        message.success('分享码生成成功：' + code);
    }
    return (
        <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '20px' }}>
            <div className="flex items-center">
                <img src="/logo.svg" className="h-16 w-16 rounded-xl" />
                <span className="text-4xl py-4 mx-4">烽火快传</span>
            </div>
            <Tabs defaultActiveKey="upload">
                <TabPane tab="上传分享" key="upload">
                    <div className="flex justify-between items-center mb-4">
                        <span className="text-lg text-zinc-700">上传文件并生成分享码</span>
                        <CodeRecord title="我生成的分享码" btnContent="上传记录" recordName="shareCodeGeneratorRecords" />
                    </div>
                    <div>
                        <Form form={form}>
                            <Form.Item name="file">
                                <TusUploader
                                    multiple={false}
                                    style={"w-full py-4 mb-0 h-64"}
                                ></TusUploader>
                            </Form.Item>
                        </Form>
                    </div>
                    <div style={{ marginBottom: '40px' }}>
                        <ShareCodeGenerator
                            fileId={uploadFileId}
                        />
                    </div>
                </TabPane>
                <TabPane tab="下载文件" key="download">
                    <div className="flex justify-between items-center mb-4">
                        <span className="text-lg block text-zinc-700 py-4">使用分享码下载文件</span>
                        <CodeRecord title="我使用的分享码" btnContent="使用记录" recordName="shareCodeDownloadRecords" isDownload={true}/>
                    </div>
                    <div>
                        <ShareCodeValidator />
                    </div>
                </TabPane>
            </Tabs>
        </div>
    )

}