import React from 'react';
import PropTypes from 'prop-types';
import VmGasModal from '../vm-gas-modal';

import BaseContent from './base';
import useModal from '../vm-hooks/useModal';
import './style';
import HistoryList from './historyList';
const TABS_BASE = 'gas-alarm-base';
const TABS_HISTORY = 'gas-alarm-history';
const Modal = ({ info = {}, urlHead, ...resetProps }) => {
    const tabs = [
        {
            value: '实时预警信息',
            key: TABS_BASE,
            content: <BaseContent info={info} />,
        },
        {
            value: '历史预警记录',
            key: TABS_HISTORY,
            content: <HistoryList info={info} urlHead={urlHead} />,
        },
    ];
    const { equipmentName, statusStr, status } = info;
    const headerExt = (
        <span className={`handle-text ${status === 'YCL' ? 'handle' : ''}`}>{statusStr}</span>
    );
    return (
        <VmGasModal
            title={equipmentName}
            {...resetProps}
            tabs={tabs}
            headerExt={headerExt}
            className="alarm-modal"
            subtitle=""
        />
    );
};

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

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

Modal.propTypes = {
    info: PropTypes.object,
    urlHead: PropTypes.string,
};

VtxGasAlarmModal.propTypes = {
    label: PropTypes.string.isRequired,
    info: PropTypes.object,
    urlHead: PropTypes.string,
};

VtxGasAlarmModal.Modal = Modal;

export default VtxGasAlarmModal;