import React, { useState } from 'react';
import PanelBox from '../../components/PanelBox';
import clsx from 'clsx';
import { useDispatch, useSelector } from 'react-redux';
import { Button, Grid, makeStyles } from '@material-ui/core'
import Yb24h from './yb24h'

const useStyles = makeStyles({
  root: {
    color: '#fff',
    padding: '0.8rem 0',
  },

  tool: {
    marginBottom: '1.2rem',
  },


  buttons: {
    backgroundColor: 'red',
    flexShrink: 0,
  },
  legend: {
    backgroundColor: 'green',
  },

  checklabel: {
    justifyContent: 'flex-start',
  }
});

export default function AreaDrp({ style }) {
  const classes = useStyles();
  const [tab,setTab] = useState('1')


  return (
    <PanelBox
      style={style}
      title="天气预报"
      color="blue"
    >
      <div className={classes.root} style={{marginBottom:'-1.5rem'}}>
        <Grid container className={classes.tool}>
          <Grid item xs style={{ marginRight: '0.5rem' }}>
            <Button
              fullWidth
              color="primary"
              variant={tab === '1' ? 'contained' : 'outlined'}
              onClick={() => setTab('1')}
            >24小时预报</Button>
          </Grid>
          <Grid item xs>
            <Button
              fullWidth
              color="primary"
              variant={tab === '2' ? 'contained' : 'outlined'}
              onClick={() => setTab('2')}
            >短时雷达预报</Button>
          </Grid>
        </Grid>
      </div>
      {
        tab==='1'?
        <Yb24h/>
        :null
      }
    </PanelBox>
  )
}