import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useSetState } from 'ahooks';
import VtxBaseModal from '../vtx-base-modal';
import BaseContent from './base';
import Statistics from './statistics';
import './style';

const TABS_BASE = 'road-base';
const TABS_THROW = 'road-statistic';

const designWidth = 1920;

const VtxRoadModal = props => {
    const { id, title, subTitle, date, visible, onCancel } = props;
    const [state, setState] = useSetState({
        tab: TABS_BASE,
        time: new Date().toString(),
    });

    useEffect(() => {
        if (visible) {
            setState({ time: new Date().toString() });
        }
    }, [visible]);

    return (
        <>
            <VtxBaseModal
                title={title}
                subTitle={subTitle}
                visible={visible}
                onCancel={onCancel}
                className="road-modal"
                onTabsChange={tab => setState({ tab })}
                tabs={[
                    { key: TABS_BASE, value: '基础信息' },
                    { key: TABS_THROW, value: '统计信息' },
                ]}
                contents={[
                    {
                        key: TABS_BASE,
                        content: <BaseContent id={id} date={date} seed={JSON.stringify(state)} />,
                    },
                    {
                        key: TABS_THROW,
                        content: <Statistics id={id} seed={JSON.stringify(state)} />,
                    },
                ]}
            />
        </>
    );
};

VtxRoadModal.propTypes = {
    id: PropTypes.string,
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    title: PropTypes.string,
    subTitle: PropTypes.string,
    date: PropTypes.string,
};

export default VtxRoadModal;