/** @format */

import * as React from 'react';
import Modal from '../../../../../../components/modalForm';
import {useBaseApiList} from '../../../../../../service/baseApi';
import {Transfer, Spin} from 'antd';
interface Iprops {
    values: string[];
    onSubmit?: (values: any[]) => void;
}
const AddinterfaceModal: React.FC<Iprops> = props => {
    const {children, values, onSubmit} = props;
    const [state, setState] = React.useState({visible: false, values: values});
    React.useEffect(() => {
        setState(preState => ({...preState, values: values}));
    }, [values]);
    const [interfaceListState, requestBaseApiList] = useBaseApiList();
    React.useEffect(() => {
        requestBaseApiList({
            is_all: true,
        });
    }, []);
    const handleUpdateModalVisible = () => {
        setState(preState => ({...preState, visible: !preState.visible}));
    };
    const handleChange = (values: string[]) => {
        setState(preState => ({...preState, values: values.reverse()}));
    };
    const handleSubmit = () => {
        const data = interfaceListState.dataSource.filter(element => state.values.includes(String(element.id)));
        setState(preState => ({...preState, visible: false}));
        onSubmit && onSubmit(data);
    };
    return (
        <>
            {React.isValidElement(children) &&
                React.cloneElement(children, {
                    onClick: handleUpdateModalVisible,
                })}
            <Modal
                onOk={handleSubmit}
                width={1000}
                onCancel={handleUpdateModalVisible}
                visible={state.visible}
                title='添加'
            >
                <Spin spinning={interfaceListState.loading}>
                    <Transfer
                        targetKeys={state.values}
                        listStyle={{
                            width: 400,
                            height: 400,
                        }}
                        onChange={handleChange}
                        render={item => item.title}
                        showSearch
                        dataSource={interfaceListState.dataSource.map(element => {
                            return {
                                ...element,
                                title: element.label,
                                key: String(element.id),
                            };
                        })}
                    />
                </Spin>
            </Modal>
        </>
    );
};
export default AddinterfaceModal;
