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

const TABS_BASE = 'df-base';
const TABS_METERING = 'df-metering';
// const TABS_WARNNING = 'wr-warning';

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

const VtxDfModal = (props: DfProps) => {
    const { id, title, subTitle, visible, onCancel, theme } = props;
    const isDark = theme === 'dark';
    const [state, setState] = useSetState({
        tab: TABS_BASE,
        time: new Date().toString(),
    });
    useEffect(() => {
        if (visible) {
            setState({ time: new Date().toString() });
        }
    }, [visible]);

    useEffect(() => {
        //
        window.console.log(isDark);
    }, [state.tab]);

    return (
        <>
            {visible && (
                <VtxBaseModal
                    title={title}
                    subTitle={subTitle}
                    visible={visible}
                    onCancel={onCancel}
                    onTabsChange={tab => {
                        setState({ tab });
                    }}
                    tabs={[
                        { key: TABS_BASE, title: '总览信息' },
                        { key: TABS_METERING, title: '计量信息' },
                    ]}
                    contents={{
                        [TABS_BASE]: <BaseInfo id={id} />,
                        [TABS_METERING]: <Metering id={id} />,
                    }}
                />
            )}
            {/* {hisVisible && <VmCarHistory setVisible={setHisVisible} carId={id} />} */}
        </>
    );
};

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 VtxDfModal;
