import { message, Modal, Pagination } from "antd";
import ShareCodeList from "./ShareCodeList";
import { useCodeManageContext } from "../CodeManageContext";
import { useEffect, useState } from "react";
import { ExclamationCircleFilled } from "@ant-design/icons";
import CodeManageEdit from "./CodeManageEdit";
import dayjs from "dayjs";
export default function CodeMangeDisplay() {
    const { isLoading, currentShareCodes, pageSize, currentPage,
        setCurrentPage, deletShareCode, editForm,
        updateCode, setCurrentCodeId, setCurrentCode, currentCode
    } = useCodeManageContext();
    const [modalOpen, setModalOpen] = useState(false);
    const [formLoading, setFormLoading] = useState(false);
    const { confirm } = Modal;
    const handleEdit = (id: string, expiresAt: Date, canUseTimes: number, code: string) => {
        console.log('编辑分享码:', id);
        setCurrentCodeId(id)
        setModalOpen(true);
        setCurrentCode(code)
        editForm.setFieldsValue({
            expiresAt: dayjs(expiresAt),
            canUseTimes: canUseTimes
        });
    };
    const handleEditOk = () => {
        const expiresAt = editForm.getFieldsValue().expiresAt.tz('Asia/Shanghai').toDate()
        const canUseTimes = Number(editForm.getFieldsValue().canUseTimes)
        updateCode(expiresAt, canUseTimes)
        message.success('分享码已更新')
        setModalOpen(false)
    }
    const handleDelete = (id: string) => {
        console.log('删除分享码:', id);
        confirm({
            title: '确定删除该分享码吗',
            icon: <ExclamationCircleFilled />,
            content: '',
            okText: '删除',
            okType: 'danger',
            cancelText: '取消',
            async onOk() {
                deletShareCode(id)
                message.success('分享码已删除')
            },
            onCancel() {
            },
        });
    };
    useEffect(() => {
        console.log('currentShareCodes:', currentShareCodes);
    }, [currentShareCodes]);
    return <>
        <div className="w-full min-h-[720px] mx-auto">
            <ShareCodeList
                data={currentShareCodes?.items}
                loading={isLoading}
                onEdit={handleEdit}
                onDelete={handleDelete}
            />
        </div>
        <div className="py-4 mt-10 w-2/3 mx-auto flex justify-center">
            <Pagination
                defaultCurrent={currentPage}
                total={currentShareCodes?.totalPages * pageSize}
                pageSize={pageSize}
                onChange={(page, pageSize) => {
                    setCurrentPage(page);
                }}
            />
        </div>
        <Modal
            width={550}
            onOk={() => {
                handleEditOk()
            }}
            centered
            open={modalOpen}
            confirmLoading={formLoading}
            onCancel={() => {
                setModalOpen(false);
            }}
            title={`编辑分享码：${currentCode}`}>
            <CodeManageEdit></CodeManageEdit>
        </Modal>
    </>
}