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 WarningContent from './warning';
import useSettings from '../vm-hooks/useSettings';
import VmCarHistory from '../vm-car-history';
import './style';

import historyDarkImg from '../../image/vehicle-history-dark.png';
import historyImg from '../../image/vehicle-history.png';

const TABS_BASE = 'vehicle-base';
const TABS_THROW = 'vehicle-warning';
// vtxdatagrid有问题，先用固定宽度处理
const MODAL_WIDTH = 1332;
const CONTENT_WIDTH = MODAL_WIDTH - 200;

const VtxVehicleModal = props => {
    const { id, title, subTitle, carType, visible, onCancel } = props;
    const { isDark } = useSettings();
    const [hisVisible, setHisVisible] = useState(false);
    const [state, setState] = useSetState({
        tab: TABS_BASE,
        time: new Date().toString(),
    });
    useEffect(() => {
        if (visible) {
            setState({ time: new Date().toString() });
        }
    }, [visible]);
    const handleHistory = () => {
        //todo
        setHisVisible(true);
    };
    return (
        <>
            <VtxBaseModal
                title={title}
                subTitle={subTitle}
                visible={visible}
                width={MODAL_WIDTH}
                onCancel={onCancel}
                className="vehicle-modal"
                onTabsChange={tab => setState({ tab })}
                tabs={[
                    { key: TABS_BASE, value: '基础信息' },
                    { key: TABS_THROW, value: '报警信息' },
                ]}
                contents={[
                    {
                        key: TABS_BASE,
                        content: (
                            <BaseContent
                                id={id}
                                seed={JSON.stringify(state)}
                                width={CONTENT_WIDTH}
                                carType={carType}
                            />
                        ),
                    },
                    {
                        key: TABS_THROW,
                        content: (
                            <WarningContent
                                id={id}
                                seed={JSON.stringify(state)}
                                width={CONTENT_WIDTH}
                                carType={carType}
                            />
                        ),
                    },
                ]}
                headerExt={
                    <div>
                        <VehicleExtButton
                            text="历史轨迹"
                            img={isDark ? historyDarkImg : historyImg}
                            onClick={handleHistory}
                        />
                    </div>
                }
            />
            {hisVisible && <VmCarHistory setVisible={setHisVisible} carId={id} />}
        </>
    );
};

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

const VehicleExtButton = props => {
    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>
    );
};

VehicleExtButton.propTypes = {
    text: PropTypes.string,
    img: PropTypes.string,
    onClick: PropTypes.func,
    carType: PropTypes.string,
};

export default VtxVehicleModal;