import React from 'react';
import PropTypes from 'prop-types';
import BaseContent from './base';
import VmGasModal from '../vm-gas-modal';
import useModal from '../vm-hooks/useModal';
import StaffList from '../staff-list';
import BottleList from './bottleList';
import './style';

const TABS_BASE = 'gas-supply-station-base';
const TABS_BOTTLELIST = 'gas-supply-station-bottle-list';
const TABS_STAFFLIST = 'gas-supply-station-staff-list';

const Modal = ({ id, urlHead, ...resetProps }) => {
    const tabs = [
        {
            value: '基础信息',
            content: <BaseContent id={id} urlHead={urlHead} />,
            key: TABS_BASE,
        },
        {
            value: '气瓶库存',
            content: <BottleList id={id} urlHead={urlHead} />,
            key: TABS_BOTTLELIST,
        },
        {
            value: '从业人员档案',
            content: <StaffList param={{ supplyStationId: id, urlHead }} />,
            key: TABS_STAFFLIST,
        },
    ];
    return <VmGasModal tabs={tabs} title="供应站" {...resetProps} />;
};

const VtxGasSupplyStationModal = 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,
};

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

VtxGasSupplyStationModal.Modal = Modal;

export default VtxGasSupplyStationModal;