text: import React from 'react';
  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 Button from '@mui/material/Button';
  import Typography from '@mui/material/Typography';
  import { PayloadsTableRow } from './PayloadsTableRow';
  import {useTheme} from '@mui/material/styles';
  import {ImportPayloadConfigDialog} from './ImportPayloadConfigDialog';
  import { MythicDialog } from '../../MythicComponents/MythicDialog';
  import ButtonGroup from '@mui/material/ButtonGroup';
  import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
  import Grow from '@mui/material/Grow';
  import Popper from '@mui/material/Popper';
  import MenuItem from '@mui/material/MenuItem';
  import MenuList from '@mui/material/MenuList';
  import ClickAwayListener from '@mui/material/ClickAwayListener';
  import {useHistory} from 'react-router-dom';
  
  
  export function PayloadsTable({payload, onDeletePayload, onUpdateCallbackAlert, onRestorePayload}){
      const theme = useTheme();
      const [showDeleted, setShowDeleted] = React.useState(false);
      const [showAutoGenerated, setShowAutoGenerated] = React.useState(false);
      const [openPayloadImport, setOpenPayloadImport] = React.useState(false);
      const dropdownAnchorRef = React.useRef(null);
      const [dropdownOpen, setDropdownOpen] = React.useState(false);
      const history = useHistory();
      const toggleShowDeleted = () => {
          setShowDeleted(!showDeleted);
      }
      const toggleShowAutoGenerated = () => {
          setShowAutoGenerated(!showAutoGenerated);
      }
      
      const dropDownOptions = [
          {
              name: "Generate New Payload",
              click: () => {
                  history.push("/new/createpayload");
              }
          },
          {
              name: "Generate New Wrapper Payload",
              click: () => {
                  history.push("/new/createwrapper");
              }
          },
          {
              name: "Import Payload Config",
              click: () => {
                  setOpenPayloadImport(true)
              }
          },
          {
              name: showDeleted ? "Hide Deleted Payloads" : "Show Deleted Payloads",
              click: toggleShowDeleted
          },
          {
              name: showAutoGenerated ? "Hide Autogenerated Payloads" : "Show Autogenerated Payloads",
              click: toggleShowAutoGenerated
          }
      ]
      const handleMenuItemClick = (event, index) => {
          dropDownOptions[index].click();
          setDropdownOpen(false);
      };
      return (
          <div style={{display: "flex", flexDirection: "column", width: "100%", height: "100%"}}>
              <Paper elevation={5} style={{backgroundColor: theme.pageHeader.main, color: theme.pageHeaderText.main,marginBottom: "5px", marginTop: "10px"}} variant={"elevation"}>
                  <Typography variant="h3" style={{textAlign: "left", display: "inline-block", marginLeft: "20px"}}>
                      Payloads
                  </Typography>
                  <ButtonGroup variant="contained" ref={dropdownAnchorRef} aria-label="split button" style={{float: "right", marginRight: "10px", marginTop:"10px"}} color="primary">
                      <Button size="small" color="primary" aria-controls={dropdownOpen ? 'split-button-menu' : undefined}
                          aria-expanded={dropdownOpen ? 'true' : undefined}
                          aria-haspopup="menu"
                          onClick={() => setDropdownOpen(!dropdownOpen)}>
                              Actions <ArrowDropDownIcon />
                      </Button>
                  </ButtonGroup>
                  <Popper open={dropdownOpen} anchorEl={dropdownAnchorRef.current} role={undefined} transition disablePortal style={{zIndex: 10}}>
                  {({ TransitionProps, placement }) => (
                      <Grow
                      {...TransitionProps}
                      style={{
                          transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom',
                      }}
                      >
                      <Paper style={{backgroundColor: theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.light, color: "white"}}>
                          <ClickAwayListener onClickAway={() => setDropdownOpen(false)}>
                          <MenuList id="split-button-menu">
                              {dropDownOptions.map((option, index) => (
                              <MenuItem
                                  key={option.name}
                                  onClick={(event) => handleMenuItemClick(event, index)}
                              >
                                  {option.name}
                              </MenuItem>
                              ))}
                          </MenuList>
                          </ClickAwayListener>
                      </Paper>
                      </Grow>
                  )}
                  </Popper>
                  {openPayloadImport &&
                      <MythicDialog fullWidth={true} maxWidth="sm" open={openPayloadImport} 
                          onClose={()=>{setOpenPayloadImport(false);}} 
                          innerDialog={<ImportPayloadConfigDialog onClose={()=>{setOpenPayloadImport(false);}} />}
                      />
                  }
              </Paper>  
              <div style={{display: "flex", flexGrow: 1, overflow: "auto"}}>
                  <TableContainer component={Paper} className="mythicElement">
                      <Table size="small" style={{ "maxWidth": "100%", "overflow": "scroll"}}>
                          <TableHead>
                              <TableRow>
                                  <TableCell style={{width: "4rem"}}> Delete</TableCell>
                                  <TableCell style={{width: "15rem"}}>Timestamp</TableCell>
                                  <TableCell style={{width: "6rem"}}>Modify</TableCell>
                                  <TableCell style={{width: "6rem"}}>Download</TableCell>
                                  <TableCell>File</TableCell>
                                  <TableCell>Description</TableCell>
                                  <TableCell >C2 Status</TableCell>
                                  <TableCell style={{width: "5rem"}}>Details</TableCell>
                              </TableRow>
                          </TableHead>
                          <TableBody>
                          
                          {payload.map( (op) => (
                              <PayloadsTableRow
                                  onDeletePayload={onDeletePayload}
                                  onAlertChanged={onUpdateCallbackAlert}
                                  showDeleted={showDeleted}
                                  showAutoGenerated={showAutoGenerated}
                                  onRestorePayload={onRestorePayload}
                                  key={"payload" + op.id}
                                  {...op}
                              />
                          ))}
                          </TableBody>
                      </Table>
                  </TableContainer>
              </div>
          </div>
      )
  }
  
  