import { MovableModal } from '@/components';
import BaseGradeController from '@/services/apis/BaseGradeController';
import ExamGradeController from '@/services/apis/ExamGradeController';
import { EducationStage } from '@/services/enums';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { Space } from 'antd';
import { useCallback, useRef, useState } from 'react';

export type ExamGradeAddModalProps = {
    /** 监测计划ID */
    examPlanId: number;
    /** 学段 */
    educationStage: EducationStage;
    /** 学期ID */
    semesterId: number;
    /** 选择机构回调函数 */
    onSelect: (orgs: API.GradeYearOutput[]) => void;
    /** 关闭回调函数 */
    onClose: () => void;
};

/** 添加监测年级 */
const ExamGradeAddModal: React.FC<ExamGradeAddModalProps> = ({ examPlanId, educationStage, semesterId, onClose, onSelect }) => {
    const [open, setOpen] = useState<boolean>(true);
    const handleClose = () => { setOpen(false); setTimeout(onClose, 300); };

    const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
    const actionRef = useRef<ActionType>();

    const columns: ProColumns<API.GradeYearOutput>[] = [
        {
            title: '年级ID',
            dataIndex: 'id',
            width: 80,
            align: 'center',
        },
        {
            title: '年级名称',
            dataIndex: 'name',
            align: 'center',
        },
        {
            title: '年级全称',
            dataIndex: 'fullName',
            align: 'center',
        },
        {
            title: '级',
            dataIndex: 'gradeBeginName',
            align: 'center',
        },
        {
            title: '届',
            dataIndex: 'gradeEndName',
            align: 'center',
        },
    ];

    const handleSelect = useCallback(async (rows: API.GradeYearOutput[]) => {
        onSelect(rows);
        try {
            await ExamGradeController.addList({
                examPlanId,
                gradeList: rows.map(t => ({
                    examPlanId,
                    gradeId: t.id,
                    gradeBeginYear: t.gradeBeginYear,
                    gradeEndYear: t.gradeEndYear,
                    educationStage: t.educationStage,
                    educationYears: t.educationYears,
                }))
            });
            handleClose();
        }
        catch { }
    }, []);

    return (
        <MovableModal
            title="添加监测年级"
            width={640}
            open={open}
            centered
            onCancel={handleClose}
            footer={false}
        >
            <ProTable<API.GradeYearOutput>
                actionRef={actionRef}
                columns={columns}
                scroll={{ x: 'max-content' }}
                tableLayout="fixed"
                search={false}
                cardProps={false}
                sticky={{ offsetHeader: 0 }}
                options={{ setting: false, fullScreen: false }}
                pagination={false}
                rowKey="id"
                toolBarRender={false}
                bordered
                size="small"
                request={async () => {
                    const data = await BaseGradeController.queryGradeYearList({ educationStage, semesterId });
                    return {
                        data,
                        success: true,
                    }
                }}
                rowSelection={{
                    selectedRowKeys,
                    onSelect: (record, selected, selectedRows) => {
                        setSelectedRowKeys(selectedRows.map((t) => t.id) || []);
                    },
                    onSelectAll: (_, selectedRows) => {
                        setSelectedRowKeys(selectedRows.map((t) => t.id) || []);
                    },
                }}
                tableAlertRender={({ selectedRowKeys, onCleanSelected }) => {
                    return (
                        <Space size="large">
                            <span>已选 {selectedRowKeys.length} 项</span>
                            <a onClick={() => {
                                setSelectedRowKeys([]);
                                onCleanSelected();
                            }}>取消选择</a>
                        </Space>
                    );
                }}
                tableAlertOptionRender={({ selectedRows }) => {
                    return (
                        <Space size="large">
                            <a onClick={() => handleSelect(selectedRows)}>批量添加</a>
                        </Space>
                    );
                }}
            />
        </MovableModal>
    );
};

export default ExamGradeAddModal;
