import React, { useEffect, useReducer, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Checkbox, message  } from 'antd';
import {CloseOutlined} from '@ant-design/icons';
import { useLocation } from 'react-router'
import './index.less'

export default function Btn() {
    const showPanels = useSelector((s) => s.runtime.showPanels)
    const homeCheckedObj = useSelector((s) => s.runtime.homeCheckedObj)
    const layerVisible = useSelector(s => s.map.layerVisible);
    const mode = useSelector(s=>s.map.mode)
    const dispatch = useDispatch()
    const location = useLocation()
    const [open, setOpen] = useState(false)

    const layerVisibleChanged = (event)=>{
        const vo = { [event.target.name]: event.target.checked };
        dispatch.map.setLayerVisible(vo);
    }
    const mapType = (event)=>{
        const name = event.target.name
        const checked = event.target.checked

        if(name==='SatelliteImage'&&checked){
            dispatch.map.setMode('2d');
            dispatch.map.setLayerVisible({ ['SatelliteImage']: true });
            dispatch.map.setLayerVisible({ ['OfflineMap']: false });
            dispatch.map.setLayerSetting({HLLayer: 'B'})
            dispatch.map.setLayerSetting({LakeLayer: 'B'})
        }
        if(name==='OfflineMap'&&checked){
            dispatch.map.setMode('2d');
            dispatch.map.setLayerVisible({ ['OfflineMap']: true });
            dispatch.map.setLayerVisible({ ['SatelliteImage']: false });
            dispatch.map.setLayerSetting({HLLayer: 'A',})
            dispatch.map.setLayerSetting({LakeLayer: 'A'})
        }
        if(name === '3d'&&'&&checked'){
            if(location.pathname==='/mgr/sy/tqyb'){
                message.error('天气预报无法切换3d视图')
                return 
            }
            dispatch.map.setMode('3d');
            dispatch.map.setLayerVisible({ ['SatelliteImage']: false });
            dispatch.map.setLayerVisible({ ['OfflineMap']: false });
            dispatch.map.setLayerSetting({HLLayer: 'B'})
            dispatch.map.setLayerSetting({LakeLayer: 'B'})
        }
    }


    return (
        <div className="mapToolBox" style={{right: showPanels?'445px':'10px'}}>
            <div className='mapToolBtn'>
                <div title="地图展示图层控制" onClick={()=>{setOpen(!open)}}>
                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/tuceng.png`} />
                </div>
                <div title="还原地图展示位置" onClick={()=>dispatch.runtime.setHome()}>
                    <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/ZhongXin.png`} />
                </div>
                <div title={`${showPanels?'收起':'展开'}悬浮功能块`} onClick={()=>dispatch.runtime.setShowPanels(!showPanels)}>
                    {
                        showPanels ? 
                        <img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/zhankai2.png`} /> 
                        :<img className='mapToolBtnIcon' src={`${process.env.PUBLIC_URL}/assets/icons/shouqi2.png`} />
                    }
                </div>
            </div>

            <div className='mapToolLayer' style={{width: open ? '300px' : '0',}}>
                <div className='mapToolLayerBox'> 
                    <div className='mapToolLayerBoxTitle'>
                        图层显示控制
                        <CloseOutlined className='mapToolLayerBoxTitleIcon' onClick={()=>setOpen(false)}/>
                    </div>
                    <div className='mapToolLayerBoxContent'>
                        <div className='mapToolLayerBoxTitle2'>基础图层</div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/xian.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>行政区划</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['AdcdLayer']} onChange={layerVisibleChanged} name={'AdcdLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={5} src={`${process.env.PUBLIC_URL}/assets/mapicon/heliu.svg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>河流</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['HLLayer']} onChange={layerVisibleChanged} name={'HLLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={18} height={18} src={`${process.env.PUBLIC_URL}/assets/mapicon/hupo.svg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>湖泊</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['LakeLayer']} onChange={layerVisibleChanged} name={'LakeLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/mapicon/3dMap.jpg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>3D图</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={mode==='3d'} onChange={mapType} name={'3d'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/icons/yingxiangtu.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>影像图</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SatelliteImage']} onChange={mapType} name={'SatelliteImage'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={20} height={20} src={`${process.env.PUBLIC_URL}/assets/icons/shiliangtu.svg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>矢量图</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['OfflineMap']} onChange={mapType} name={'OfflineMap'} ></Checkbox>
                            </div>
                        <div className='mapToolLayerBoxTitle2'>监测体系</div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/drp.svg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>雨量站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['RealDrpLayer']} onChange={layerVisibleChanged} name={'RealDrpLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={10} height={18} src={`${process.env.PUBLIC_URL}/assets/mapicon/hdsw.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>水位站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['HdswLayer']} onChange={layerVisibleChanged} name={'HdswLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/flow.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>流量站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['GongShuiLayer']} onChange={layerVisibleChanged} name={'GongShuiLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/video.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>视频点</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['PicStLayer']} onChange={layerVisibleChanged} name={'PicStLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/yjgb.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>预警广播</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['YjgbLayer']} onChange={layerVisibleChanged} name={'YjgbLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/wy.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>位移站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['WYLayer']} onChange={layerVisibleChanged} name={'WYLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/sy.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>渗压站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SYLayer']} onChange={layerVisibleChanged} name={'SYLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={17} height={19} src={`${process.env.PUBLIC_URL}/assets/mapicon/sl.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>渗流站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['SLLayer']} onChange={layerVisibleChanged} name={'SLLayer'} ></Checkbox>
                            </div>
                        <div className='mapToolLayerBoxTitle2'>重点对象</div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/weixianqu.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>危险区</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['WxqLayer']} onChange={layerVisibleChanged} name={'WxqLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/anzhidian.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>安置点</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['AZDLayer']} onChange={layerVisibleChanged} name={'AZDLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/qishiyedanwei.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>企事业单位</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['QSYDWLayer']} onChange={layerVisibleChanged} name={'QSYDWLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/homeMenu/yanhejuminhu.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>沿河居民户</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['YHJMHLayer']} onChange={layerVisibleChanged} name={'YHJMHLayer'} ></Checkbox>
                            </div>
                        <div className='mapToolLayerBoxTitle2'>水利工程</div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/sk.png`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>水库监测</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['ShuiKuLayer']} onChange={layerVisibleChanged} name={'ShuiKuLayer'} ></Checkbox>
                            </div>
                            <div className='mapToolLayerBoxItem'>
                                <div className='mapToolLayerBoxItemIcon'><img width={15} height={15} src={`${process.env.PUBLIC_URL}/assets/mapicon/sdz.svg`} alt=""/></div>
                                <div className='mapToolLayerBoxItemIconDiv'>水电站</div>
                                <Checkbox className='mapToolLayerBoxItemCheckBox' color="primary" checked={!!layerVisible['ShuiDianZhanLayer']} onChange={layerVisibleChanged} name={'ShuiDianZhanLayer'} ></Checkbox>
                            </div>
                    </div>
                </div>
                
            </div>
            
        </div>
    );
}