import * as React from 'react';
import { useTranslation } from 'next-i18next';

import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

import { SEVERITY_LEVELS } from 'src/constants';

export default function SeverityDialog(props: {
  open: boolean;
  onClose: () => void;
}) {
  const { open, onClose } = props;

  const { t } = useTranslation();

  const handleClose = () => {
    onClose();
  };

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      aria-labelledby="dialog-title"
      aria-describedby="dialog-description"
    >
      <DialogTitle id="dialog-title">
        {t('severity.what_is_severity')}
      </DialogTitle>
      <DialogContent>
        {/* {SEVERITY_LEVELS.map((level) => (
          <DialogContentText
            key={level.id}
            component="div"
            sx={{
              display: 'flex',
              gap: '1rem',
            }}
          >
            <Typography component="span">
              {t(`severity.${level.transKey}`)}
            </Typography>
            <Typography component="span">-</Typography>
            <Typography component="span">
              {t(`severity.${level.transKey}-desc`)}
            </Typography>
          </DialogContentText>
        ))} */}
        <TableContainer component={Paper}>
          <Table sx={{ minWidth: 650 }} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>{t('severity.severity_type')}</TableCell>
                <TableCell>{t('severity.severity_level')}</TableCell>
                <TableCell>{t('severity.severity_description')}</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {SEVERITY_LEVELS.map((row) => (
                <TableRow
                  key={row.id}
                  sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                >
                  <TableCell component="th" scope="row">
                    {t(`severity.${row.transKey}`)}
                  </TableCell>
                  <TableCell>{`S${row.id}`}</TableCell>
                  <TableCell>{t(`severity.${row.transKey}_desc`)}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} autoFocus>
          {t('severity.ok')}
        </Button>
      </DialogActions>
    </Dialog>
  );
}