"use client"

import { ArticleType } from '@/app/_lib/data/article';
import ImageUpload from '@/app/_ui/ImageUpload';
import { faArrowLeft, faRibbon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { BackTop, Button, Card, Col, DatePicker, Form, Grid, Input, InputNumber, message, Row, Select, Space, Upload } from 'antd';
import { useParams, useRouter } from 'next/navigation'
import 'md-editor-rt/lib/style.css';
import '@ant-design/v5-patch-for-react-19';
import { mRequest } from '@/app/_lib/request';
import dayjs from 'dayjs';
import {Editor} from "@bytemd/react";
import gfm from '@bytemd/plugin-gfm'

const plugins = [
    gfm(),
    // Add more plugins here
]
export default function AddOrEdit({ editData }: { editData?: ArticleType | null }) {
    const router = useRouter()
    console.log(editData);


    return <>
        <div className='w-full bg-white  p-2  flex gap-x-1 items-center rounded shadow'>
            <div className='flex gap-x-1 items-center text-[#666] hover:text-[#333] cursor-pointer '
                onClick={() => {
                    router?.back()
                }}
            >

                <FontAwesomeIcon icon={faArrowLeft}></FontAwesomeIcon>
                返回

            </div>

        </div>

        <Card title="新增文章" className='mt-2'>
            <Form<ArticleType>

                onFinish={async (res) => {
                    if (editData) {
                        await mRequest("PUT", "/api/article", {
                            ...res,
                            _id: editData._id
                        })
                    } else {
                        await mRequest("POST", "/api/article", {
                            ...res,
                            addTime: dayjs().unix()
                        })
                    }
                    router?.push("/admin/dashboard/article")
                    message.success("操作成功")

                }}
                initialValues={editData ? {
                    ...editData,
                    addTime: dayjs(editData.addTime * 1000)
                } : {
                    priority: 0,
                    addTime: dayjs()
                }}
            >
                <Row gutter={24}>

                    <Col span={12}>
                        <Form.Item label="标题" name={"title"} rules={[{ required: true, message: '请输入标题' }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="介绍" name={"description"}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入副标题'
                                }
                            ]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="链接" name={"link"}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入链接'
                                }
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item label="封面" name={"cover"}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入封面'
                                }
                            ]}

                        >
                            <ImageUpload
                                accept="image/*"
                                width={80}
                                height={80}
                                hiddenCover
                            ></ImageUpload>
                        </Form.Item>

                    </Col>

                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item label="关联网址"
                            name="linkId"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入副标题'
                                }
                            ]}>
                            <Select showSearch>

                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>

                        <Form.Item label="修改时间" name={"addTime"}>
                            <DatePicker showTime />
                        </Form.Item>
                    </Col>
                    <Col span={12}>

                        <Form.Item label="优先级" name={"priority"}>
                            <InputNumber></InputNumber>
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item label="内容" name={"content"} rules={[
                    {
                        required: true,
                        message: '请输入内容'
                    }
                ]}>
                    {/* <MDEditor className='my-markdown ' /> */}
                    <Editor
                        plugins={plugins} value={''}
                    />
                </Form.Item>

                <Form.Item className="flex justify-end">
                    <Space>

                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Space>

                </Form.Item>
            </Form>

        </Card>
    </>
}