import React from 'react';
import { Switch, InputNumber } from 'antd';
import IconFont from '../../../themeComponents/IconFont';
import '../style/trajectory-map.less';

export default function TrajectoryTools({ isPause, reset, prev, next, visible, onChangeVisible, playOrPause, speedChange, speed }) {
  return (
    <div className="map-trajectory-tools">
      <div className="tool-item" onClick={playOrPause}>
        <IconFont type={isPause ? 'icon-S_View_PlayerPlay' : 'icon-S_View_PlayerPause'} />
        {isPause ? '开始' : '暂停'}
      </div>

      <div className="tool-item" onClick={reset}>
        <IconFont type={'icon-S_Edit_Reset'} />
        复位
      </div>

      <div className="tool-item" onClick={prev}>
        <IconFont type={'icon-S_Arrow_Forward'} />
        上一个
      </div>
      <div className="tool-item next-btn" onClick={next}>
        <IconFont type={'icon-S_Arrow_Backward'} />
        下一个
      </div>
      <div className="tool-item">
        <Switch checked={visible} onChange={onChangeVisible} />
        {`${visible ? '关闭' : '开启'}图片`}
      </div>
      <div className="tool-item speed">
        <InputNumber size={'small'} defaultValue={speed} min={0} step={100} onChange={speedChange} />
        速度km/h
      </div>
    </div>
  );
}
