/** @format */

import * as React from 'react';
import {Row, Col} from 'antd';
import Modal from '../../../../components/modalForm';
import {ModalProps} from 'antd/es/modal';
import JsonView from '../../../../components/jsonview';
interface Iprops extends ModalProps {
    data: any[];
}
const modalJson: React.FC<Iprops> = props => {
    const {data, title, ...rest} = props;
    const [state, setState] = React.useState<{data: any}>({
        data: [],
    });
    React.useEffect(() => {
        setState(preState => ({
            ...preState,
            data: data.map(element => {
                let src = null;
                try {
                    src = element.src ? JSON.parse(element.src) : null;
                } catch (err) {
                    src = element.src;
                }
                return {
                    ...element,
                    src,
                };
            }),
        }));
    }, [data]);

    return (
        <Modal footer={null} width={1000} title={props.title} maskClosable {...rest}>
            <Row type='flex' justify='space-between'>
                {state.data.map((element: any, index: number) => {
                    return (
                        <Col key={index} span={11}>
                            <h3>{element.title}</h3>
                            <JsonView keyWord={element.keyWord} src={element.src} />
                        </Col>
                    );
                })}
            </Row>
        </Modal>
    );
};
export default modalJson;
