"use client";
import { Button, Card, Drawer, Form, Input, Space, Table } from "antd";
import { useState } from "react";
import '@ant-design/v5-patch-for-react-19';
import tableConfig from "./config"
import { useAntdTable } from "ahooks";
import { User } from "@/app/_lib/data/user";
import { mRequest } from "@/app/_lib/request";
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}
const data: DataType[] = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sydney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
    },
];
export default function Page() {
    const [open, setOpen] = useState(false)
    const { tableProps, loading, error } = useAntdTable(({ current, pageSize }) => mRequest<{
        total: number;
        list: User[];
    }>('GET', `/api/links?page=${current}&pageSize=${pageSize}}`),
        {
            defaultPageSize: 10,
        }
    );
    return (
        <>

            <Card
                title="链接管理"
                extra={
                    <Button type="primary" onClick={() => {
                        setOpen(true)
                    }}>添加链接</Button>
                }>
                <Table
                    columns={tableConfig}
                    dataSource={data}
                />
            </Card>
            <Drawer
                title={'添加图标'}
                open={open}
                width={500}
                onClose={() => {
                    setOpen(false)
                }}
                footer={
                    <Space>

                        <Button>重置</Button>
                        <Button type="primary">提交</Button>
                    </Space>
                }
            >
                <Form
                    labelCol={{ span: 4 }}
                    onFinish={(res) => {
                        mRequest('POST', "/api/link").then(res => {
                            setOpen(false)
                        })
                    }}
                >
                    <Form.Item
                        name="name"
                        label="名称"
                        rules={[{ required: true, message: "请输入名称" }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="desc"
                        label="关键词"
                        rules={[{ required: true, message: "请输入名称" }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="url"
                        label="链接"
                        rules={[{ required: true, message: "请输入链接" }]}
                    >
                        <Input />
                    </Form.Item>


                    {/* <Form.Item
                        name="icon"
                        label="图标"
                        rules={[{ required: true, message: "请上传图标" }]}
                    >
                        <ResourceUpload></ResourceUpload>
                    </Form.Item> */}



                    <Form.Item className="flex justify-end">
                        <Button type="primary" htmlType="submit">
                            确认
                        </Button>
                    </Form.Item>
                </Form>

            </Drawer>


        </>
    )
}