import React from 'react';
import PropTypes from 'prop-types';
import VtxFullScreenBaseModal from '../vtx-full-screen-base-modal';
import { Button } from 'antd';
import useSettings from '../vm-hooks/useSettings';
import VtxBaseModal from '../vtx-base-modal';

const VmGasModal = ({ tabs = [], onCancel, title, children, subtitle = '查看', ...resetProps }) => {
    const { theme } = useSettings();
    const newTabs = [];
    const contents = [];
    tabs.forEach(({ key, value, content }) => {
        newTabs.push({
            key,
            value,
        });
        contents.push({
            key,
            content,
        });
    });
    if (theme === 'dark') {
        return (
            <VtxBaseModal
                title={title}
                subTitle={subtitle}
                tabs={newTabs}
                contents={contents}
                onCancel={onCancel}
                {...resetProps}
            />
        );
    }
    return (
        <VtxFullScreenBaseModal
            title={<VtxFullScreenBaseModal.Title text={title} subtitle={subtitle} />}
            {...resetProps}
            onCancel={onCancel}
            width={VtxFullScreenBaseModal.size.large}
            tabs={tabs}
            footer={[
                <Button key="cancel" onClick={onCancel}>
                    关闭
                </Button>,
            ]}
        >
            {children}
        </VtxFullScreenBaseModal>
    );
};

VmGasModal.propTypes = {
    tabs: PropTypes.array,
    title: PropTypes.string,
    children: PropTypes.node,
    subtitle: PropTypes.element,
    onCancel: PropTypes.func.isRequired,
};

export default VmGasModal;
