/** @format */

import * as React from 'react';
import {notification} from 'antd';
import {useCreateReportTask} from '../../../../../service/task';
import CreateReportForm from './taskform';
import ProvideSelect from '../../../../../components/select/providerSelect';
import ProvideApiSelect from '../../../../../components/select/providerApi';

const CreatteTask: React.FC = props => {
    const {children} = props;
    const [state, setState] = React.useState({
        visible: false,
    });
    const [tatskState, requestData] = useCreateReportTask();
    const handlePost = (values: any) => {
        requestData(values).then(error => {
            if (error) {
                return notification.error({
                    message: '创建数据源任务失败!',
                    description: error,
                });
            }
            handleUpdateModalVisible();
        });
    };
    const handleUpdateModalVisible = () => {
        setState(preState => ({...preState, visible: !preState.visible}));
    };
    const [dependState, setDependState] = React.useState<{
        provider_id: number | '';
        provider_api_id_list: number[];
    }>({
        provider_id: '',
        provider_api_id_list: [],
    });
    return (
        <>
            <CreateReportForm
                visible={state.visible}
                loading={tatskState.loading}
                handlePost={handlePost}
                onCancel={handleUpdateModalVisible}
                error={tatskState.error}
                childs={[
                    {
                        key: 'provider_id',
                        label: '供应商',
                        component: (
                            <ProvideSelect
                                onChange={id =>
                                    setDependState(preState => ({...preState, provider_id: id as number | ''}))
                                }
                                provider_api_id={dependState.provider_api_id_list.toString()}
                            />
                        ),
                    },
                    {
                        key: 'provider_api_id_list',
                        label: '接口',
                        rules: [
                            {
                                required: true,
                                message: '请选择接口!',
                            },
                        ],
                        component: (
                            <ProvideApiSelect
                                onChange={id =>
                                    setDependState(preState => ({
                                        ...preState,
                                        provider_api_id_list: id as number[],
                                    }))
                                }
                                provider_id={dependState.provider_id}
                                mode='multiple'
                            />
                        ),
                    },
                ]}
            />
            {React.isValidElement(children)
                ? React.cloneElement(children, {
                      onClick: handleUpdateModalVisible,
                  })
                : null}
        </>
    );
};
export default CreatteTask;
