"use client";
import { Button, Card, Drawer, Form, Image, Input, InputNumber, message, Modal, Popconfirm, Space, Table } from "antd";
import { useRef, useState } from "react";
import { useAntdTable } from "ahooks";
import { mRequest } from "@/app/_lib/request";
import { LinkTypeItem } from "@/app/_lib/types";
import LinkTable from "./LinkTable";
import ImageUpload from "@/app/_ui/ImageUpload";
import { useForm } from "antd/es/form/Form";
import { LinkType } from "@/app/_lib/data/linkType";
import '@ant-design/v5-patch-for-react-19';

export default function Page() {
    const { tableProps, refresh } = useAntdTable(
        async ({ current, pageSize }) => {
            return mRequest<{
                total: number;
                data: LinkTypeItem[]
            }>(
                "GET",
                `/api/linkType?page=${current}&pageSize=${pageSize}`
            ).then((res: any) => {
                return {
                    total: res?.total || 0,
                    list: res?.list || [],
                }
            })
        },

    )
    const [selectedType, setSelectedType] = useState<undefined | null | LinkType>(
        undefined
    )
    return (
        <>

            <Card
                title="新链接管理"
                extra={
                    <Space>
                        <Button onClick={() => {
                            refresh()
                        }}>刷新</Button>
                        <Button
                            type="primary"
                            onClick={() => {
                                setSelectedType(null)
                            }}
                        >
                            添加分类
                        </Button>
                    </Space>
                }
            >
                <Table<LinkType>
                    {...tableProps}
                    rowKey="_id"
                    expandable={{
                        expandedRowRender: (row) => <LinkTable id={row._id} />,
                    }}
                    columns={[
                        {
                            title: "名称",
                            dataIndex: "label",
                        },

                        {
                            title: "图标",
                            dataIndex: "icon",
                            render: (_, item) => (
                                <>
                                    <Image src={item.icon} width={70} ></Image>
                                </>
                            )
                        },
                        {
                            title: "操作",
                            render: (_, item) => (
                                <Space>
                                    <Button
                                        type="primary"
                                        ghost
                                        size="small"
                                        onClick={() => {
                                            setSelectedType(item)
                                        }}
                                    >
                                        修改分类
                                    </Button>

                                    <Popconfirm
                                        title={`确认要删除${item.label}么？`}
                                        onConfirm={() => {
                                            mRequest("DELETE", "/api/linkType/" + item._id, {
                                                returnType: "text",
                                            }).then(() => {
                                                refresh()
                                                message.success("删除成功")
                                            })
                                        }}
                                    >
                                        <Button type="primary" danger size="small">
                                            删除
                                        </Button>
                                    </Popconfirm>
                                </Space>
                            ),
                        },
                    ]}
                />
            </Card>

            <Drawer
                destroyOnClose
                title={selectedType !== undefined ? selectedType === null ? "添加分类" : "修改分类" : ""}
                open={selectedType !== undefined}
                width={500}
                onClose={() => {
                    setSelectedType(undefined)
                }}
            >
                <Form
                    labelCol={{ span: 4 }}
                    initialValues={selectedType ?
                        selectedType
                        : {
                            priority: 0
                        }
                    }
                    onFinish={async (res) => {
                        if (selectedType) {
                            await mRequest("PUT", "/api/linkType", {
                                _id: selectedType._id, ...res
                            })
                        } else {
                            await mRequest("POST", "/api/linkType", {
                                ...res,
                            })
                        }
                        refresh()
                        setSelectedType(undefined)
                        message.success("操作成功")
                    }}
                >
                    <Form.Item
                        name="label"
                        label="名称"
                        rules={[{ required: true, message: "请输入名称" }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="icon"
                        label="图标"
                        rules={[{ required: true, message: "请输入" }]}
                    >
                        <ImageUpload
                            accept="image/*"
                            width={80}
                            height={80}
                        ></ImageUpload>

                    </Form.Item>
                    <Form.Item
                        rules={[{ required: true, message: "请输入优先级" }]}
                        name="priority"
                        label="优先级"
                    >
                        <InputNumber min={0} max={99999999} />
                    </Form.Item>
                    <Form.Item
                        name="location"
                        label="显示位置"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item className="flex justify-end">
                        <Space>
                            <Button>
                                重置
                            </Button>
                            <Button type="primary" htmlType="submit">
                                确认
                            </Button>
                        </Space>

                    </Form.Item>
                </Form>
            </Drawer>
         
            {/* <Drawer
                forceRender
                title={'添加图标'}
                open={selectedType !== undefined}
                width={500}
                onClose={() => {
                    setSelectedType(undefined)
                }}

            >
                <Form
                    form={fo}
                    labelCol={{ span: 4 }}
                    onFinish={async (res) => {
                        if (selectedType) {
                            await mRequest("PUT", "/api/linkType", {
                                _id: selectedType._id, ...res
                            })
                        } else {
                            await mRequest("POST", "/api/linkType", {
                                ...res,
                            })
                        }
                        refresh()
                        setSelectedType(undefined)
                        message.success("操作成功")
                    }}
                >
                    <Form.Item
                        name="label"
                        label="名称"
                        rules={[{ required: true, message: "请输入名称" }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="icon"
                        label="图标"
                        rules={[{ required: true, message: "请输入" }]}
                    >
                        <ImageUpload
                            accept="image/*"
                            width={60}
                            height={60}
                            background={fo?.getFieldValue("icon ")}
                        ></ImageUpload>

                    </Form.Item>
                    <Form.Item
                        name="location"
                        label="显示位置"
                        rules={[{ required: true, message: "请输入链接" }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item className="flex justify-end">
                        <Space>
                            <Button>
                                重置
                            </Button>
                            <Button type="primary" htmlType="submit">
                                确认
                            </Button>
                        </Space>

                    </Form.Item>
                </Form>

            </Drawer> */}

        </>
    )
}