import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import useModal from '../vm-hooks/useModal';
import { getUserInfo } from './api';
import UserFJMModal from './userFJMModal';
import UserJMModal from './userJMModal';
import './style';
const Modal = ({ id, urlHead, ...resetProps }) => {
    if (!resetProps.visible) {
        return null;
    }
    const [info, setInfo] = useState({});
    useEffect(() => {
        if (id) {
            getUserInfo(id, urlHead).then(data => {
                setInfo(data);
            });
        }
    }, [id, urlHead]);
    const props = {
        info,
        urlHead: urlHead || null,
        ...resetProps,
    };
    if (info?.type === 'FJM') {
        return <UserFJMModal {...props} />;
    } else if (info?.type === 'JM') {
        return <UserJMModal {...props} />;
    }
    return null;
};

const VtxGasUserModal = props => {
    const { label, id, urlHead } = props;
    const { showModal, ...modalProps } = useModal();

    return (
        <>
            {label ? (
                <a type="link" onClick={showModal}>
                    {label}
                </a>
            ) : (
                <span>-</span>
            )}
            {modalProps.visible && <Modal id={id} urlHead={urlHead} {...modalProps} />}
        </>
    );
};

Modal.propTypes = {
    id: PropTypes.string.isRequired,
    urlHead: PropTypes.string,
};

VtxGasUserModal.propTypes = {
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    urlHead: PropTypes.string,
};

VtxGasUserModal.Modal = Modal;

export default VtxGasUserModal;