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 { FormGroup, MenuItem, Select, Switch, Typography } from '@material-ui/core';
import DpDialogTitle from '../../../../layouts/mui/DpDialogTitle';
import { useDispatch, useSelector } from 'react-redux';
import { getLayerSetting, getLayerVisible } from '../../../../models/map/selectors';
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';


function Setting({ onClose }) {
  const layerVisible = useSelector(getLayerVisible);
  const layerSetting = useSelector(getLayerSetting);

  const dispath = useDispatch();

  return (
    <Dialog
      open={true}
      onClose={onClose}
      maxWidth="xl"
      style={{ borderRadius: 0 }}
      PaperComponent={DpPaperComponent}
      BackdropComponent={DpBackgroundDrop}
    >
      <div className="boxhead"></div>

      <DpDialogTitle>河道水位显示设置</DpDialogTitle>
      <DialogContent>
        <div style={{ width: 320, padding: '1rem 0' }}>
          <FormGroup>
            <div style={{ marginBottom: '1rem' }}>
              <Typography variant="subtitle2">显示河道水位图层</Typography>
              <Switch
                checked={!!layerVisible.RealHDLayer}
                color="primary"
                edge="start"
                onChange={(e) => dispath.map.setLayerVisible({ RealHDLayer: e.target.checked })}
              />
            </div>
          </FormGroup>
        </div>
      </DialogContent>
      <div className="boxfoot"></div>
    </Dialog>
  )
}

export default Setting;