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,
    showConfirm,
    onOk,
    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 onClick={onCancel}>关闭</Button>
                    {showConfirm && (
                        <Button onClick={() => onOk && onOk()} type="primary">
                            确认
                        </Button>
                    )}
                </>
            }
        >
            {children}
        </VtxFullScreenBaseModal>
    );
};

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

export default VmGasModal;