import React, { useState,useEffect } from 'react';
import { OverallPromise } from '../../../../models/_/real';
import useRequest from '../../../../utils/useRequest';
import PanelBox from '../../components/PanelBox';
import OverallContent from './OverallContent';
import { makeStyles } from '@material-ui/core/styles';
import DpTableRow from '../../../../layouts/mui/DpTableRow';
import {
  Box,
  Typography,
  Checkbox,
  FormControlLabel,
  ButtonGroup,
  Button,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  IconButton,
  Collapse
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import { useDispatch, useSelector } from 'react-redux';
import DpTableCell from '../../../../layouts/mui/DpTableCell';
import clsx from 'clsx';
import RemoveIcon from '@material-ui/icons/Remove';
import config from '../../../../config';
import { InfoPopNames } from '../../InfoPops';
const useStyles = makeStyles((theme) => ({
  root: {
    color: '#fff',
    '& .MuiTypography-root': {
      color: '#fff'
    },
    '& .MuiCheckbox-root': {
      color: '#fff',
      '&.Mui-checked': {
        color: '#409eff'
      }
    },
    '& .MuiButtonGroup-root': {
      marginTop: theme.spacing(2),
      marginBottom: theme.spacing(3)
    }
  },
  typeSection: {
    marginBottom: theme.spacing(2)
  },
  timeButton: {
    width:210,
    color: '#fff',
    borderColor: 'rgba(255,255,255,0.3)',
    '&.MuiButton-contained': {
      backgroundColor: '#409eff',
      color: '#fff',
      '&:hover': {
        backgroundColor: '#409eff'
      }
    },
    '&:hover': {
      backgroundColor: 'rgba(255,255,255,0.1)'
    }
  },
  table: {
    '& .MuiTableCell-root': {
      color: '#fff',
      borderColor: 'rgba(255,255,255,0.1)'
    }
  },
  expandButton: {
    color: '#fff'
  },
  stationRow: {
    '&:nth-of-type(odd)': {
      backgroundColor: 'rgba(255,255,255,0.05)'
    },
    '&:hover': {
      backgroundColor: 'rgba(255,255,255,0.1)'
    }
  },
  warningRow: {
    '&.pink': { backgroundColor: 'rgba(255,192,203,0.5)' },
    '&.purple': { backgroundColor: 'rgba(147,112,219,0.5)' },
    '&.blue': { backgroundColor: 'rgba(135,206,235,0.5)' },
    '&.blue1': { backgroundColor: 'rgba(135,206,235,0.4)' },
    '&.blue2': { backgroundColor: 'rgba(135,206,235,0.3)' },
    '&.green': { backgroundColor: 'rgba(144,238,144,0.5)' }
  },

  expandedRow: {
    '&.pink': { backgroundColor: 'rgba(255,192,203,0.1)' },
    '&.purple': { backgroundColor: 'rgba(147,112,219,0.1)' },
    '&.blue': { backgroundColor: 'rgba(135,206,235,0.1)' },
    '&.green': { backgroundColor: 'rgba(144,238,144,0.1)' }
  }
}));
export default function Overall({ style }) {
    const dispatch = useDispatch();

  const classes = useStyles();
  const [types, setTypes] = useState({
    mountain: true,
    water: true,
    weather: true,
    reservoir: true
  });
  const [timeRange, setTimeRange] = useState('1h');
  const [expanded, setExpanded] = useState({});

  const handleTypeChange = (event) => {
    setTypes({
      ...types,
      [event.target.name]: event.target.checked
    });
  };

  const stations = [
    { id: 'history', name: '历史极值站点', count: 0, color: 'pink' },
    { id: '100year', name: '100年一遇以上站点', count: 0, color: 'purple' },
    { id: '50year', name: '50年一遇以上站点', count: 0, color: 'blue' },
    { id: 'special', name: '特大暴雨站点', count: 0, color: 'blue1' },
    { id: 'heavy', name: '大暴雨站点', count: 0, color: 'blue2' },
    { id: 'storm', name: '暴雨站点', count: 1, color: 'green' }
  ];

  const toggleExpand = (id) => {
    setExpanded(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  const drpData = [
   {
        "stcd": "61612910",
        "stnm": "桃林河(阎河)",
      "adcd": "421181000000000",
      adnm: '阎家河镇桃林河村村民委员会',
      zgrz: '55.67',
      time: '2025-06-11 10:14至2025-06-12 10:14',
        jjrz:'58.43',
        "wscd": null,
        "importancy": 0,
        "lgtd": 115.087777777,
        "lttd": 31.164444444,
        "elev": null,
        "hasRz": true,
        "type": "sh",
        "today": 21,
        "h1": 15.5,
        "h3": 21,
        "h6": 21,
        "h12": 21,
        "h24": 21,
        "h48": 21,
        "tm": "2025-06-06T22:15:00.000Z",
        "state": 1,
        "warning": 0
    },
     {
        "stcd": "61612150",
        "stnm": "鹰山畈(黄土岗)",
        "adcd": "421181000000000",
       "wscd": null,
         adnm: '黄士岗镇英山畈村村民委员会(雾港河村、鹰山畈村)',
      zgrz: '77.00',
      time: '2025-06-12 10:33',
        jjrz:'78.98',
        "importancy": 0,
        "lgtd": 115.073611,
        "lttd": 31.386667,
        "elev": null,
        "hasRz": true,
        "type": "sh",
        "today": 27,
        "h1": 18.5,
        "h3": 27,
        "h6": 27,
        "h12": 27,
        "h24": 27,
        "h48": 27,
        "tm": "2025-06-06T22:00:00.000Z",
        "state": 1,
        "warning": 0
    },
      {
        "stcd": "61613700",
        "stnm": "四角门(宋铁二桥)",
        "adcd": "421181000000000",
        "wscd": null,
        "importancy": 0,
        "lgtd": 114.8291,
        "lttd": 31.0754,
          adnm: '铁门岗乡大庙岗村村民委员会(四角门村、大庙岗村、大店村、肖上湾村)',
      zgrz: '27.57',
      time: '2025-06-11 10:14至2025-06-12 10:14',
        jjrz:'34.86',
        "elev": null,
        "hasRz": true,
        "type": "sh",
        "today": 3.5,
        "h1": 2,
        "h3": 3.5,
        "h6": 3.5,
        "h12": 3.5,
        "h24": 3.5,
        "h48": 3.5,
        "tm": "2025-06-06T22:00:00.000Z",
        "state": 1,
        "warning": 0
    },
        {
        "stcd": "61614460",
        "stnm": "项生(宋埠)",
        "adcd": "421181000000000",
        "wscd": null,
          "importancy": 0,
              adnm: '宋埠镇项生村村民委员会',
      zgrz: '21.93',
      time: '2025-06-11 10:14至2025-06-12 10:14',
        jjrz:'23.65',
        "lgtd": 114.798056,
        "lttd": 31.058611,
        "elev": null,
        "hasRz": true,
        "type": "sh",
        "today": 4.5,
        "h1": 2,
        "h3": 4.5,
        "h6": 4.5,
        "h12": 4.5,
        "h24": 4.5,
        "h48": 4.5,
        "tm": "2025-06-06T22:00:00.000Z",
        "state": 1,
        "warning": 0
    },
  ]
  const skData = []
  const flyTo = (record) => {
    const { lgtd, lttd } = record;
    if (lgtd && lttd) {
      dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealDrpPop, properties: record, coordinates: [lgtd, lttd] });
      dispatch.runtime.setCameraTarget({
        center: [lgtd, lttd + config.poiPositionOffsetY.hd],
        zoom: config.poiPositionZoom.hd,
        pitch: config.poiPitch,
      });
    }
  }
  const [type, setType] = useState('1h')
  const [data, setData] = useState([])
  

  useEffect(() => {
    const newArr = timeRange == '3h' ? skData : drpData;
    setData(newArr)
  }, [timeRange])
  
  return (
    <PanelBox
      style={style}
      title="水情统计"
      color="green"
        extra={
        <span className="button-group">
          {
            ['h1', 'h3', 'h6', 'h12', 'h24'].map(key => (
              <span key={key} className={clsx({ active: type === key })} onClick={() => setType(key)}>{key}</span>
            ))
          }
        </span>
      }
    >
      <Box className={classes.root}>
           <div style={{ display: 'flex', alignItems: 'center' }}>
                  <ButtonGroup variant="outlined">
                    {[
                      { value: '1h', label: '河道水情' },
                      { value: '3h', label: '水库水情' },
                    ].map((item) => (
                      <Button
                        key={item.value}
                        className={classes.timeButton}
                        onClick={() => {
                          if (item.value == '1h' || item.value == '3h') {
                            setTimeRange(item.value)
                          }
                        }}
                        variant={timeRange === item.value ? 'contained' : 'outlined'}
                        style={{ padding: '5px 10px' }}
                      >
                        {item.label}
                      </Button>
                    ))}
                  </ButtonGroup>
        
                </div>
       
      </Box>
       <TableContainer style={{ height: '70%' }}>
          <Table  size="small" stickyHeader> 
            <TableHead >
              <DpTableRow>
                <DpTableCell style={{ minWidth: '3rem' }} align='center'>序号</DpTableCell>
                <DpTableCell style={{minWidth: '8rem' }} align='center'>站名</DpTableCell>
                <DpTableCell style={{ minWidth: '8rem' }} align='center'>政区</DpTableCell>
                <DpTableCell style={{ minWidth: '8rem' }} align='center'>最高水位(m)</DpTableCell>
                <DpTableCell style={{ minWidth: '16rem' }} align='center'>发生时间</DpTableCell>
                <DpTableCell style={{ minWidth: '8rem' }} align='center'>警戒水位(m)</DpTableCell>
                {/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
              </DpTableRow>
            </TableHead>
            <TableBody>
              {
                data.map((item,i) => (
                  <DpTableRow key={item.stcd} onClick={() => flyTo(item)}>
                    <DpTableCell align='center'>{i + 1}</DpTableCell>
                    <DpTableCell align='center'>{item.stnm}</DpTableCell>
                    <DpTableCell align='center'>
                        <div
                    className="table-ellipsis cursor-pointer"
                    title={item.adnm}
                  >{item.adnm}</div>
                    </DpTableCell>
                    <DpTableCell align='center'>{item.zgrz}</DpTableCell>
                    <DpTableCell align='center'>{item.time}</DpTableCell>
                    <DpTableCell align='center'>{item.jjrz}</DpTableCell>
                  </DpTableRow>
                ))
              }
                    
            </TableBody>
          </Table>
        </TableContainer>
    </PanelBox>
  )
}