import React from 'react';
import PropTypes from 'prop-types';
import useModal from '../vm-hooks/useModal';
import BaseContent from './baseContent';
import VmGasModal from '../vm-gas-modal';
import FillingInfo from './fillingInfo';
import useGasEnumList from '../vm-hooks/useGasEnumList';
import CirculationInfo from './circulationInfo';
import InspectionInfo from './inspectionInfo';
import LastProcessFlow from './lastProcessFlow';
import './style';
import { getUrlParam } from '@vtx/utils';

const TABS_BASE = 'gas-cylinder-file-base';
const TABS_FILLINGINFO = 'gas-cylinder-file-filling-info';
const TABS_CIRCULATIONINFO = 'gas-cylinder-file-circulation-info';
const TABS_INSPECTIONINFO = 'gas-cylinder-file-inspection-info';
const TABS_LASTPROCESSFLOW = 'gas-cylinder-file-last-process-flow';

const Modal = ({ id, urlHead, ...resetProps }) => {
    const { enumList } = useGasEnumList('BottleOperateType', urlHead);
    const tabs = [
        {
            value: '气瓶信息',
            key: TABS_BASE,
            content: <BaseContent id={id} urlHead={urlHead} />,
        },
        {
            value: '充装信息',
            key: TABS_FILLINGINFO,
            content: <FillingInfo id={id} bottleOperateTypeList={enumList} urlHead={urlHead} />,
        },
        {
            value: '流转信息',
            key: TABS_CIRCULATIONINFO,
            content: <CirculationInfo id={id} bottleOperateTypeList={enumList} urlHead={urlHead} />,
        },
        {
            value: '检验信息',
            key: TABS_INSPECTIONINFO,
            content: <InspectionInfo id={id} bottleOperateTypeList={enumList} urlHead={urlHead} />,
        },
        {
            value: '末次工序流转',
            key: TABS_LASTPROCESSFLOW,
            content: <LastProcessFlow id={id} urlHead={urlHead} />,
        },
    ];

    if (getUrlParam().carqFlag == 'true') {
        tabs.splice(1, 4);
    }

    const newTabs = [];
    const contents = [];
    tabs.forEach(({ key, value, content }) => {
        newTabs.push({
            key,
            value,
        });
        contents.push({
            key,
            content,
        });
    });

    return <VmGasModal tabs={tabs} title="气瓶档案管理" {...resetProps} />;
};

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

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

VtxGasCylinderFileModal.Modal = Modal;

export default VtxGasCylinderFileModal;