import React from 'react';

import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DpPaperComponent from '../../../../layouts/mui/DpPaperCompanent';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
import { useDispatch, useSelector } from 'react-redux';
import RowItem from './RowItem';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import { DCPJ_TYPES } from '../../consts';
import { Button, makeStyles, Typography } from '@material-ui/core';
import RealDrpLayer from '../../MapCtrl/mapstyle/realdrplayer';
import RealHDLayer from '../../MapCtrl/mapstyle/realhdlayer';
import RealSkLayer from '../../MapCtrl/mapstyle/realsklayer';
import DpAppBar from '../../../../layouts/mui/DpAppBar';
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
import YuwaiLayer from '../../MapCtrl/mapstyle/yuwailayer';
import PicStLayer from '../../MapCtrl/mapstyle/picstlayer';
import PumpLayer from '../../MapCtrl/mapstyle/tmp/pumplayer';
import BxSkLayer from '../../MapCtrl/mapstyle/tmp/bxsk';

const useStyles = makeStyles({
  catRoot: {
    display: 'flex',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    borderBottom: '1px dashed #bce9f088',
    marginBottom: '0.5rem'
  },

  catItem: {
    width: '45%'
  }
})


function LayersDlg({ onClose }) {
  const layerVisible = useSelector(getLayerVisible);
  const layerSetting = useSelector(getLayerSetting);
  const dispatch = useDispatch();
  const classes = useStyles();
  debugger
  const layerVisibleChanged = (event) => {
    const vo = { [event.target.name]: event.target.checked };
    dispatch.map.setLayerVisible(vo);
  };

  const layerSettingChanged = (event) => {
    const vo = { [event.target.name]: event.target.checked };
    dispatch.map.setLayerSetting(vo);
  }

  return (
    <Dialog
      open={true}
      onClose={onClose}
      maxWidth="xl"
      style={{ borderRadius: 0 }}
      PaperComponent={DpPaperComponent}
      BackdropComponent={DpBackgroundDrop}
    >
      <div className="boxhead"></div>
      <DpAppBar position="sticky">
        <Typography variant="h6" style={{ alignSelf: 'center', marginLeft: '0.5rem', flexGrow: 1 }}>图层显示设置</Typography>
        <DpCloseButton onClick={onClose} />
      </DpAppBar>

      <DialogContent style={{ padding: '1rem', width: '30rem', overflowX: 'hidden' }}>
        <div className={classes.catRoot}>
          <div className={classes.catItem}>
            <RowItem icon="adcd5" label="行政区划" name="AdcdLayer" checked={!!layerVisible.AdcdLayer} onChange={layerVisibleChanged} />
          </div>
          <div className={classes.catItem}>
            <RowItem icon="fzdx" label="防灾对象" name="FzdxLayer" checked={!!layerVisible.FzdxLayer} onChange={layerVisibleChanged} />
          </div>
          <div className={classes.catItem}>
            <RowItem icon="道路" label="道路" name="RoadLayer" checked={!!layerVisible.RoadLayer} onChange={layerVisibleChanged} />
          </div>
          <div className={classes.catItem}>
            <RowItem icon="河流" label="河流" name="RivlLayer" checked={!!layerVisible.RivlLayer} onChange={layerVisibleChanged} />
          </div>
        </div>

        <div className={classes.catRoot}>
          <div className={classes.catItem}>
            <RowItem icon="drp" label="雨量监测" name={RealDrpLayer.LayerName} checked={!!layerVisible[RealDrpLayer.LayerName]} onChange={layerVisibleChanged} />
          </div>
          <div className={classes.catItem}>
            <RowItem icon="rz" label="河道水位监测" name={RealHDLayer.LayerName} checked={!!layerVisible[RealHDLayer.LayerName]} onChange={layerVisibleChanged} />
          </div>
          <div className={classes.catItem}>
            <RowItem icon="sk" label="水库监测" name={RealSkLayer.LayerName} checked={!!layerVisible[RealSkLayer.LayerName]} onChange={layerVisibleChanged} />
          </div>
          <div className={classes.catItem}>
            <RowItem icon="drp" label="域外图层" name={YuwaiLayer.LayerName} checked={!!layerVisible[YuwaiLayer.LayerName]} onChange={layerVisibleChanged} />
          </div>
          <div className={classes.catItem}>
            <RowItem icon="picst" label="图像站" name={PicStLayer.LayerName} checked={!!layerVisible[PicStLayer.LayerName]} onChange={layerVisibleChanged} />
          </div>
        </div>

        <div className={classes.catRoot}>
          {
            Object.keys(DCPJ_TYPES).map(type => (
              <div key={type} className={classes.catItem}>
                <RowItem icon={type} label={DCPJ_TYPES[type]} name={`Dcpj_${type}Layer`} checked={!!layerVisible[`Dcpj_${type}Layer`]} onChange={layerVisibleChanged} />
              </div>
            ))
          }
        </div>


        <div className={classes.catRoot}>
          <div className={classes.catItem}>
            <RowItem icon="泵站" label="泵站" name={PumpLayer.LayerName} checked={!!layerVisible[PumpLayer.LayerName]} onChange={layerVisibleChanged} />
          </div>
          <div className={classes.catItem}>
            <RowItem icon="病险水库" label="病险水库" name={BxSkLayer.LayerName} checked={!!layerVisible[BxSkLayer.LayerName]} onChange={layerVisibleChanged} />
          </div>
        </div>

        <div className={classes.catRoot}>
          <div className={classes.catItem}>
            <RowItem icon="地形" label="地形" name="dem" checked={!!layerSetting.dem} onChange={layerSettingChanged} />
          </div>
          <div className={classes.catItem}>
            <RowItem icon="地形" label="卫星影像" name="dom" checked={!!layerSetting.dom} onChange={layerSettingChanged} />
          </div>
        </div>

        <div style={{ textAlign: 'right' }}>
          <Button onClick={() => { dispatch.map.resetMap(); }}>重置设置</Button>
        </div>

      </DialogContent>
      <div className="boxfoot"></div>
    </Dialog>
  )
}

export default React.memo(LayersDlg);