import React from 'react';
import clsx from 'clsx';
import './ActionDock.less';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles, Tooltip, Typography } from '@material-ui/core';

const VIEWS = [
  { id: 0, title: '防洪形势', img: '/assets/menu/防洪形势.png' },
  { id: 1, title: '实时数据', img: '/assets/menu/实时数据.png' },
  { id: 6, title: '水库调度', img: '/assets/menu/病险水库.png' },
  { id: 2, title: '水利设施', img: '/assets/menu/水利设施.png' },
  { id: 3, title: '辅助决策', img: '/assets/menu/辅助决策.png' },
  { id: 4, title: '降雨中心', img: '/assets/menu/预警分析.png' },
  { id: 5, title: '天气预报', img: '/assets/menu/降雨中心.png' },
];

const useStylesBootstrap = makeStyles((theme) => ({
  arrow: {
    color: '#0004',
  },
  tooltip: {
    backgroundColor: '#0008',
    padding: '1rem',
    top: '0.7rem'
  },
}));

function BootstrapTooltip(props) {
  const classes = useStylesBootstrap();

  return <Tooltip arrow classes={classes} {...props} />;
}

export default function ActionDock({ }) {
  const view = useSelector(s => s.map.view);

  const dispatch = useDispatch();

  return (
    <div className="dp-actiondock">
      {
        VIEWS.map(o => (
          <BootstrapTooltip key={o.id} title={<Typography variant="h6">{o.title}</Typography>}>
            <div className="dock-item" onClick={() => dispatch.map.setView(o.id)}>
              <div className={clsx('button', { active: view === o.id })}>
                <img src={o.img} />
              </div>
            </div>
          </BootstrapTooltip>
        ))
      }
      <div className="logo">
        <a href="http://www.hbwhdc.cn" target="blank" style={{ color: '#fff', cursor: 'pointer' }}>@湖北纬皓端成科技有限公司</a>
        <span style={{ marginRight: '1rem' }}></span>联系电话: 15697168180
      </div>
    </div>
  )
}