/** @format */

import * as React from 'react';
import {Transfer, Form, Spin} from 'antd';
import Result from '../../../../../components/result';
import {FormComponentProps} from 'antd/es/form';
import {useProvideApi, ProvideApiRecordProps} from '../../../../../service/provider';
import ModalForm from '../../../../../components/modalForm';

interface Iprops {
    targetKeys?: number[];
    visible?: boolean;
    onOk: (values: ProvideApiRecordProps[]) => void;
    onCancel: () => void;
}
const createSourceForm: React.FC<Iprops & FormComponentProps> = props => {
    const {form, onOk, onCancel, visible = false, targetKeys = []} = props;
    const [state, setState] = React.useState({targetKeys: targetKeys.map(element => element.toString())});
    const [provideApiListState, requestProvideApiList] = useProvideApi();
    React.useEffect(() => {
        requestProvideApiList();
    }, []);
    React.useEffect(() => {
        setState(preState => ({...preState, targetKeys: targetKeys.map(element => element.toString())}));
    }, [targetKeys]);
    const handleSubmit = () => {
        const targetValues = state.targetKeys.map((element: string) => {
            return provideApiListState.dataSource.find(item => {
                return item.id.toString() === element;
            });
        });
        onOk(targetValues);
    };
    const handleChange = (targetKeys: string[], direction: string, moveKeys: string[]) => {
        if (direction === 'right') {
            setState(preState => ({...preState, targetKeys: preState.targetKeys.concat(...moveKeys)}));
        } else {
            setState(preState => ({...preState, targetKeys}));
        }
    };
    return (
        <ModalForm
            onCancel={onCancel}
            width={890}
            visible={visible}
            error={null}
            title="新增"
            destroyOnClose
            onOk={handleSubmit}
        >
            <Spin spinning={provideApiListState.loading}>
                <Result error={provideApiListState.error} onRetry={() => requestProvideApiList()}>
                    <Transfer
                        style={{width: '100%'}}
                        listStyle={{
                            width: 380,
                            height: 300,
                        }}
                        targetKeys={state.targetKeys.map(element => element.toString())}
                        onChange={handleChange}
                        locale={{itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容'}}
                        showSearch
                        dataSource={provideApiListState.dataSource.map(element => {
                            return {
                                ...element,
                                title: element.label,
                                key: element.key.toString(),
                            };
                        })}
                        render={item => item.title}
                    />
                    ,
                </Result>
            </Spin>
        </ModalForm>
    );
};
export default Form.create<Iprops & FormComponentProps>({name: 'provideApi'})(createSourceForm);
