import React, { useState } 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 { InfoPopNames } from '../../InfoPops';
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';
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": "Q9111",
      "stnm": "福田河",
      "adcd": "421181000000000",
      'test':1,
      "wscd": null,
      "importancy": 0,
      "lgtd": 115.0944,
      "lttd": 31.4747,
      "elev": null,
      "hasRz": true,
      "type": "qx",
     "today": 50.3,
        "h1": 50.2,
        "h3": 50.2,
        "h6": 50.2,
        "h12": 50.2,
        "h24": 50.3,
              "tm": "2025-06-06T22:00:00.000Z",

      "state": 1,
      "warning": 0
    },
  ]
  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('h24')
  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>
        <TableContainer >
          <Table  stickyHeader> 
            <TableHead >
              <TableRow>
                <DpTableCell style={{ width: '51%' }}>站名</DpTableCell>
                <DpTableCell style={{ width: '30%' }}>累计雨量(mm)</DpTableCell>
                {/* <DpTableCell style={{ width: '15%' }}>所属政区</DpTableCell> */}
                <DpTableCell style={{ width: '20%' }}>{timeRange == '1h' ? '所属政区':'所属流域'}</DpTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {stations.map((station) => (
                <React.Fragment key={station.id}>
                  <TableRow
                    // className={classes.stationRow}
                    className={`${classes.warningRow} ${station.color}`}
                  >
                    <DpTableCell>
                      <Box display="flex" alignItems="center">
                        <IconButton
                          size="small"
                          className={classes.expandButton}
                          onClick={() => toggleExpand(station.id)}
                        >
                          {expanded[station.id] ? <RemoveIcon /> : <AddIcon />}
                        </IconButton>
                        {station.name}({station.count})
                      </Box>
                    </DpTableCell>
                    <DpTableCell></DpTableCell>
                    <DpTableCell></DpTableCell>
                    <DpTableCell></DpTableCell>
                  </TableRow>
                  <TableRow>
                    <DpTableCell colSpan={4} style={{ padding: 0 }}>
                      <Collapse in={expanded[station.id]} timeout="auto" unmountOnExit>
                        <Box className={`${classes.expandedRow} ${station.color}`}>
                          {/* 展开的详细内容可以在这里添加 */}{
                           station.id == 'storm' && drpData.map(item => (
                              <TableRow onClick={() =>flyTo(item)}>
                                <DpTableCell style={{ width: '53%' }}>{item.stnm}</DpTableCell>
                                <DpTableCell style={{ width: timeRange == '1h' ?'27%':"28%" }}>{item.today}</DpTableCell>
                               <DpTableCell style={{ width: timeRange == '1h' ?'20%':'19%' }}>{timeRange == '1h' ? '福田河镇':'长江流域'}</DpTableCell>
                              </TableRow>
                            ))
                          }

                        </Box>
                      </Collapse>
                    </DpTableCell>
                  </TableRow>
                </React.Fragment>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Box>
    </PanelBox>
  )
}