import React, { useMemo, useState } 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: 100, title: '防汛', img: '/assets/menu/防洪形势.png',children:[
    { 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' },
  ] },
  { id: 200, title: '水库', img: '/assets/menu/水库专题.png',children:[
    { id: 201, title: '雨情监测', img: '/assets/menu/雨情监测.png' },
    { id: 202, title: '水情监测', img: '/assets/menu/水情监测.png' },
    { id: 203, title: '安全监测', img: '/assets/menu/安全监测.png' },
    { id: 204, title: '视频监视', img: '/assets/menu/视频监视.png' },
    { id: 205, title: '防汛调度', img: '/assets/menu/防汛调度.png' },
    { id: 206, title: '水库管理', img: '/assets/menu/水库管理.png' },
  ] },
  { id: 300, title: '水厂', img: '/assets/menu/水利设施.png',children:[
    { id: 301, title: '供水态势', img: '/assets/menu/降雨中心.png' },

    // 供水态势
    // 水质安全
    // 水厂运行
    // 管网健康诊断
    // 应急指挥调度
    // 决策支持与报表
  ] },
  {
    id: 400, title: '灌区', img: '/assets/menu/灌区专题.png', children: [
      { id: 501, title: '灌区监测', img: '/assets/menu/灌区监测.png' },
      { id: 504, title: '水旱灾害防御', img: '/assets/menu/水旱灾害防御.png' },
    // { id: 502, title: '预警信息管理', img: '/assets/menu/预警信息管理.png' },
    { id: 503, title: '水资源调度', img: '/assets/menu/水资源调度.png' },
    { id: 505, title: '量测水管理', img: '/assets/menu/量测水管理.png' },
    { id: 506, title: '水政管理', img: '/assets/menu/水政管理.png' },
    { id: 507, 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 [viewKey,setViewKey] = useState(null)
  const viewItem = useMemo(()=>viewKey?VIEWS.filter(o=>o.id===viewKey)[0].children:VIEWS,[viewKey,VIEWS])

  const dispatch = useDispatch();


  return (
    <div className="dp-actiondock">
      {
        viewKey?
        <BootstrapTooltip key={999} title={<Typography variant="h6"><span style={{color:'#fff'}}>返回</span></Typography>}>
          <div className="dock-item" onClick={() => {
            // dispatch.map.setView(o.id)  这里不知道用哪个，等问好在弄
            setViewKey(null)
          }}>
            <div className={clsx('button', { active: false })}>
              <img width={40} style={{marginLeft:'5px'}} src={'/assets/pump/退出.png'} />
            </div>
          </div>
        </BootstrapTooltip>
        :null
      }
      {
        viewItem.map(o => (
          <BootstrapTooltip key={o.id}  title={<Typography variant="h6"><span style={{color:'#fff'}}>{o.title}</span></Typography>}>
            <div className="dock-item" onClick={() => {
              if(o.children){
                //一级菜单
                dispatch.map.setView(o.children[0].id)
                setViewKey(o.id)
              }else{
                //二级菜单
                dispatch.map.setView(o.id)
              }
            }}>
              <div className={clsx('button', { active: view === o.id })}>
                <img width={32} height={32} 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>
  )
}