import React from 'react';
import PropTypes from 'prop-types';
import useSettings from '../vm-hooks/useSettings';
// import VMChart from '../vm-chart';
import { Progress } from 'antd';

import timeImg from '../../image/vehicle-time.png';
import timeImgDark from '../../image/vehicle-time-dark.png';
import locImg from '../../image/vehicle-loc.png';
import locImgDark from '../../image/vehicle-loc-dark.png';
import statusImg from '../../image/vehicle-status.png';
import statusImgDark from '../../image/vehicle-status-dark.png';
import ringImgDark from '../../image/vehicle-ring-dark.png';
import ringImg from '../../image/vehicle-ring.png';
import vehicleImg from '../../image/vehicle.gif';
import speedImg from '../../image/vehicle-speed.png';

export const TimeInfo = props => {
    const { isDark, theme } = useSettings();
    const { value } = props;
    return (
        <div className={`real-time-info ${theme}`}>
            <img src={isDark ? timeImgDark : timeImg} alt="" />
            <span>{value}</span>
        </div>
    );
};
TimeInfo.propTypes = {
    value: PropTypes.string,
};
export const LocationInfo = props => {
    const { isDark, theme } = useSettings();
    const { value } = props;
    return (
        <div className={`real-time-info ${theme}`}>
            <img src={isDark ? locImgDark : locImg} alt="" />
            <span>{value}</span>
        </div>
    );
};
LocationInfo.propTypes = {
    value: PropTypes.string,
};

export const StatusInfo = props => {
    const { isDark, theme } = useSettings();
    const { value } = props;
    return (
        <div className={`real-time-status ${theme}`}>
            <div>
                <img src={isDark ? statusImgDark : statusImg} alt="" />
                <span>{value}</span>
            </div>
        </div>
    );
};

export const VehicleRing = () => {
    const { isDark, theme } = useSettings();
    return (
        <div className={`real-time-vehicle ${theme}`}>
            <img className="vehicle" src={vehicleImg} alt="" />
            <img className="ring" src={isDark ? ringImgDark : ringImg} alt="" />
        </div>
    );
};
StatusInfo.propTypes = {
    value: PropTypes.string,
};

export const VehicleDrive = props => {
    const { theme } = useSettings();
    const { work, percent, drive, showWork } = props;
    return (
        <div className="real-drive">
            <Progress
                type="circle"
                percent={percent || 0}
                width={64}
                strokeWidth={10}
                strokeColor={{
                    from: '#2fe7ee',
                    to: '#1fffa4',
                }}
                className={`real-time-progress ${theme}`}
            />
            <InfoItem label="今日行驶" value={drive} unit="km" />
            {showWork && <InfoItem label="今日作业" value={work || 0} unit="km" />}
        </div>
    );
};
VehicleDrive.propTypes = {
    work: PropTypes.number,
    showWork: PropTypes.bool,
    percent: PropTypes.number,
    drive: PropTypes.number,
};

export const VehicleSpeed = props => {
    const { theme } = useSettings();
    const { value } = props;
    // const option = {
    //     series: [
    //         {
    //             type: 'gauge',
    //             startAngle: 180,
    //             endAngle: 0,
    //             min: 0,
    //             max: 240,
    //             splitNumber: 8,
    //             itemStyle: {
    //                 color: '#58D9F9',
    //                 shadowColor: 'rgba(0,138,255,0.45)',
    //                 shadowBlur: 4,
    //                 shadowOffsetX: 0,
    //                 shadowOffsetY: 0,
    //             },
    //             progress: {
    //                 show: true,
    //                 roundCap: true,
    //                 width: 4,
    //             },
    //             pointer: {
    //                 icon:
    //                     'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
    //                 length: '75%',
    //                 width: 4,
    //                 offsetCenter: [0, '5%'],
    //             },
    //             axisLine: {
    //                 roundCap: true,
    //                 lineStyle: {
    //                     width: 4,
    //                 },
    //             },
    //             axisTick: {
    //                 splitNumber: 2,
    //                 lineStyle: {
    //                     width: 1,
    //                     color: '#999',
    //                 },
    //             },
    //             splitLine: {
    //                 length: 8,
    //                 lineStyle: {
    //                     width: 2,
    //                     color: '#999',
    //                 },
    //             },
    //             axisLabel: {
    //                 show: false,
    //             },
    //             detail: {
    //                 show: false,
    //             },
    //             data: [
    //                 {
    //                     value: 100,
    //                 },
    //             ],
    //         },
    //     ],
    // };
    return (
        <div className={`real-speed ${theme}`}>
            {/* <VMChart width={100} height={64} defaultOption={false} option={option} /> */}
            <img className="img" src={speedImg} alt="" />
            <InfoItem label="当前速度" value={value} unit="km/h" />
        </div>
    );
};

VehicleSpeed.propTypes = {
    value: PropTypes.number,
};

const InfoItem = props => {
    const { value, label, unit } = props;
    const { theme } = useSettings();
    return (
        <div className={`real-info-item ${theme}`}>
            <span className="label">{label}</span>
            <span className="value">
                <span className="number">{value || 0}</span>
                <span className="unit">{unit}</span>
            </span>
        </div>
    );
};

InfoItem.propTypes = {
    value: PropTypes.number,
    label: PropTypes.string,
    unit: PropTypes.string,
};