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

const TABS_BASE = 'car-base';
// const TABS_WARNNING = 'cp-warning';
interface StaffProps {
    id: string;
    visible: boolean;
    onCancel: () => void;
    title: string;
    subTitle?: string;
    theme: string;
}

const VtxStaffModal = (props: StaffProps) => {
    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}
                    height={815}
                    visible={visible}
                    onCancel={onCancel}
                    onTabsChange={tab => {
                        setState({ tab });
                    }}
                    tabs={[
                        { key: TABS_BASE, title: '总览信息' },
                        // { key: TABS_WARNNING, title: '报警信息' },
                    ]}
                    contents={{
                        [TABS_BASE]: <BaseInfo id={id} />,
                        // [TABS_WARNNING]: <div>dfdf</div>,
                    }}
                />
            )}
        </>
    );
};

VtxStaffModal.propTypes = {
    id: PropTypes.string,
    startDate: PropTypes.string,
    endDate: PropTypes.string,
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    title: PropTypes.string,
    subTitle: PropTypes.string,
};

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