import React from 'react';
import VtxBaseModal from '../vtx-base-modal';
import { BaseInfo, Statistical } from './components';
// import WarningContent from './warning';
import useSettings from '../vm-hooks/useSettings';
import '../style';

const TABS_BASE = 'road-base';
const TABS_STATIC = 'road-statistical';
// const TABS_WARNNING = 'cp-warning';

interface RoadProps {
    id: string;
    visible: boolean;
    onCancel: () => void;
    title: string;
    subTitle?: string;
    theme?: string;
}

const VtxRoadModal = (props: RoadProps) => {
    const { id, title, subTitle, visible, onCancel } = props;
    // const isDark = theme === 'dark';

    return (
        <>
            {visible && (
                <VtxBaseModal
                    title={title}
                    subTitle={subTitle}
                    width={1355}
                    visible={visible}
                    onCancel={onCancel}
                    tabs={[
                        { key: TABS_BASE, title: '总览信息' },
                        { key: TABS_STATIC, title: '统计信息' },
                        // { key: TABS_WARNNING, title: '报警信息' },
                    ]}
                    contents={{
                        [TABS_BASE]: <BaseInfo id={id} />,
                        [TABS_STATIC]: <Statistical id={id} />,
                        // [TABS_WARNNING]: <div>dfdf</div>,
                    }}
                />
            )}
        </>
    );
};

interface ExtButtonProps {
    text: string;
    img: string;
    onClick: () => void;
}

export const VehicleExtButton = (props: ExtButtonProps) => {
    const { img, text, onClick } = props;
    const { theme } = useSettings();
    return (
        <div className={`vtx-vehicle-ext-btn ${theme}`} onClick={onClick}>
            <img src={img} alt="" />
            <span>{text}</span>
        </div>
    );
};

export default VtxRoadModal;
