import { Button, makeStyles, Typography } from '@material-ui/core'
import React, { useMemo } from 'react'
import { WarnRespListPromise } from '../../../../models/_/warnresp';
import { WARNRESP_COLOR } from '../../../../utils/renutils';
import useRequest from '../../../../utils/useRequest'

const useStyles = makeStyles({
  root: {
    display: 'flex',
    flexGrow: 1,
    flexDirection: 'column',
    alignItems: 'stretch',
    padding: '1rem'
  },

  item: {
    height: '25%',
    display: 'flex',
  },

  sep: {
    borderBottom: '1px dashed #bce9f088',
  },

  head: {
    width: '15%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },

  banner: {
    borderRadius: '0.25rem',
    padding: '1rem',
    color: '#fff',
    border: '2px solid #fff8',
  },

  content: {
    flexGrow: 1,
    padding: '0.8rem',
    overflowY: 'auto'
  },

  action: {
    width: '10%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

function Item({ level, classes, doStart, conf }) {
  const standards = conf?.standards || [];

  return (
    <>
      <div className={classes.head}>
        <div className={classes.banner} style={{ backgroundColor: WARNRESP_COLOR[level] }}>{`${level}级响应`}</div>
      </div>
      <div className={classes.content}>
        <Typography style={{ color: '#fff8' }} variant="body1">当发生以下情况之一时，启动防汛{level}级响应</Typography>
        {
          standards.map(o => (
            <Typography key={o.id} style={{ color: '#fffd' }} variant="body2">{o.standard}</Typography>
          ))
        }
      </div>
      <div className={classes.action}>
        <Button size="large" color="primary" onClick={() => doStart(conf)}>启动</Button>
      </div>
    </>
  );
}

function StartWarnRespPanel({ type, doStart }) {
  const classes = useStyles();

  const { data: listdata } = useRequest(WarnRespListPromise.get);

  const datas = useMemo(() => {
    if (!listdata) {
      return [null, null, null, null];
    }
    return ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ'].map(level => listdata.find(o => o.level === level && o.type === type));
  }, [listdata, type]);

  return (
    <div className={classes.root}>
      <div className={classes.item}>
        <Item level="Ⅰ" classes={classes} doStart={doStart} conf={datas[0]} />
      </div>
      <div className={classes.sep}></div>
      <div className={classes.item}>
        <Item level="Ⅱ" classes={classes} doStart={doStart} conf={datas[1]} />
      </div>
      <div className={classes.sep}></div>
      <div className={classes.item}>
        <Item level="Ⅲ" classes={classes} doStart={doStart} conf={datas[2]} />
      </div>
      <div className={classes.sep}></div>
      <div className={classes.item}>
        <Item level="Ⅳ" classes={classes} doStart={doStart} conf={datas[3]} />
      </div>
    </div>
  )
}

export default React.memo(StartWarnRespPanel)