"use client"

import { ArticleType, insertArticle, updateArticle } from '@/app/_lib/data/article';
import ImageUpload from '@/app/_ui/ImageUpload';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button, Card, Col, DatePicker, Form, Input, InputNumber, message, Row, Select, SelectProps, Space, Spin } from 'antd';
import { useRouter } from 'next/navigation'
import 'md-editor-rt/lib/style.css';
import '@ant-design/v5-patch-for-react-19';
import dayjs from 'dayjs';
import gfm from '@bytemd/plugin-gfm'
import { useEffect, useMemo, useRef, useState } from 'react';
import { getLinkList, updateLink } from '@/app/_lib/data/link';
import { debounce } from '@/app/_lib/utils';
import { useRequest } from 'ahooks';
import MyMarkdownEdit from '@/app/_ui/MarkdownView';
const plugins = [
    gfm(),
    // Add more plugins here
]


export default function AddOrEdit({ editData }: { editData?: ArticleType | null }) {
    const router = useRouter()
    const fetchRef = useRef(0)
    const [form] = Form.useForm();
    const [fetching, setFetching] = useState(false);
    const [options, setOptions] = useState<any[]>([]);
    const { data: linkList = [] } = useRequest(() => getLinkList({ filter: { articleId: editData?._id || '-1' } }).then(res => res.list))
    useEffect(() => {
        if (linkList.length !== 0) {
            form.setFieldValue('linkId', linkList.map(item => ({ key: item._id, value: item._id, label: item.name })))
            return
        }

    }, [linkList])
    const debounceFetcher = useMemo(() => {
        const loadOptions = (value: string) => {
            fetchRef.current += 1;
            const fetchId = fetchRef.current;
            setOptions([]);
            setFetching(true);

            getLinkList({ filter: { name: value } }).then((newOptions) => {
                if (fetchId !== fetchRef.current) {
                    // for fetch callback Forder
                    return;
                }

                setOptions(newOptions.list.map(item => ({
                    value: item._id,
                    label: item.name,
                })));
                setFetching(false);
            });
        };

        return debounce(loadOptions, 300);
    }, [getLinkList, 300]);

    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>
                form={form}
                onFinish={async (res: any) => {
                    const linkIdList = res.linkId
                    const addTime = res.addTime.unix()
                    if (editData) {
                        updateArticle({ ...res, _id: editData._id, addTime }).then(() => {
                            linkIdList.map((item: any) => {
                                updateLink(
                                    item.value,
                                    {
                                        articleId: editData._id
                                    })
                            })

                        })
                    } else {

                        insertArticle({
                            ...res,
                            addTime: dayjs().unix()

                        }).then(id => {
                            linkIdList.map((item: any) => {
                                updateLink(
                                    item.value,
                                    {
                                        articleId: id
                                    })
                            })
                        })
                    }

                    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}
                            ></ImageUpload>
                        </Form.Item>

                    </Col>

                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item label="关联网址"
                            name="linkId"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入副标题'
                                }
                            ]}>
                            <Select
                                labelInValue
                                filterOption={false}
                                showSearch
                                mode="multiple"
                                onSearch={debounceFetcher}
                                notFoundContent={fetching ? <Spin size="small" /> : null}
                                options={options}
                            />
                        </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: '请输入内容'
                    }
                ]}>
                    <MyMarkdownEdit />
                </Form.Item>

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

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

                </Form.Item>
            </Form>

        </Card>
    </>
}