import { mRequest } from "@/app/_lib/request"
import ImageUpload from "@/app/_ui/ImageUpload"
import { Link } from "@/app/api/link/route"
import {
    Button,
    Card,
    Form,
    Image,
    Input,
    InputNumber,
    message,
    Modal,
    Popconfirm,
    Space,
    Table,
} from "antd"
import { useCallback, useEffect, useState } from "react"


export default function LinkTable(props: { id: string }) {
    const [list, setList] = useState<Link[]>([])
    const [loading, setLoading] = useState(false)
    const refresh = useCallback(async () => {
        setLoading(true)
        const res = await mRequest<{ list: Link[] }>(
            "GET",
            `/api/link?typeId=${props.id}&page=1&pageSize=9999`
        )
        setList(res.list)
        setLoading(false)
    }, [props.id])
    useEffect(() => {
        refresh()
    }, [refresh])
    const [selected, setSelected] = useState<undefined | null | Link>(
        undefined
    )
    return (
        <div className="p-4">
            <Card
                title="链接列表"
                extra={
                    <Space>
                        <Button onClick={refresh}>
                            刷新
                        </Button>
                        <Button type="primary" onClick={() => setSelected(null)}>
                            添加链接
                        </Button>
                    </Space>

                }
            >
                <Table<Link>
                    loading={loading}
                    dataSource={list}
                    pagination={false}
                    rowKey="_id"
                    columns={[
                        {
                            title: "名称",
                            dataIndex: "name",
                        },
                        {
                            title: "图标",
                            dataIndex: "logoLink",
                            render: (_, row) => (
                                <Image width={80} src={row.logoLink}></Image>
                            )
                        },

                        {
                            title: "操作",
                            fixed: "right",
                            width: 200,
                            render: (_, row) => (
                                <Space>
                                    <Button type="link" onClick={() => setSelected(row)}>
                                        编辑
                                    </Button>
                                    <Popconfirm
                                        title="确认删除？"
                                        onConfirm={async () => {
                                            await mRequest("DELETE", "/app/link/" + row.id, {
                                                returnType: "text",
                                            })
                                            refresh()
                                            message.success("删除成功")
                                        }}
                                    >
                                        <Button type="link" danger>
                                            删除
                                        </Button>
                                    </Popconfirm>
                                </Space>
                            ),
                        },
                    ]}
                />
            </Card>
            <Modal
                open={selected !== undefined}
                onCancel={() => setSelected(undefined)}
                destroyOnClose
                title={(selected ? "编辑" : "新增") + "链接"}
                footer={false}
            >
                <Form
                    labelCol={{ span: 4 }}
                    initialValues={
                        selected
                            ? selected
                            : { title: "", url: "", logoLink: "", description: "", priority: 0 }
                    }
                    onFinish={async (res) => {
                        if (selected) {
                            await mRequest("PUT", "/api/link", {
                                id: selected._id, ...res
                            })
                        } else {
                            await mRequest("POST", "/api/link", {
                                ...res, type: props.id
                            })
                        }
                        refresh()
                        setSelected(undefined)
                        message.success("操作成功")
                    }}
                >
                    <Form.Item
                        name="name"
                        label="图标名称"
                        rules={[{ required: true, message: "名称必填" }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="logoLink"
                        label="图标名称"
                        rules={[{ required: true, message: "名称必填" }]}
                    >
                        <ImageUpload
                            accept="image/*"
                            width={60}
                            height={60}
                        ></ImageUpload>
                    </Form.Item>
                    <Form.Item name="link" label="链接" rules={[{ required: true, message: "链接必填" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="description" label="详情" >
                        <Input.TextArea />
                    </Form.Item>
                    <Form.Item name="priority" label="优先级">
                        <InputNumber></InputNumber>
                    </Form.Item>
                    <Form.Item className="flex justify-end">
                        <Button type="primary" htmlType="submit">
                            确认
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}