import React, { useState, useContext } from "react";
import StoreContext from "../../ctx/StoreContext.jsx";

import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import Typography from "@mui/material/Typography";

import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import NotificationsIcon from "@mui/icons-material/Notifications";

import Stack from "@mui/material/Stack";

export default function SilencingBox(props) {
  const { silenceEntry } = props;

  const {
    name: testName,
    method: testMethod,
    class: testClass,
    id: silenceId,
    silencedUntil,
  } = silenceEntry;

  const { state: store, updateStore } = useContext(StoreContext);

  function Actions() {
    return (
      <React.Fragment>
        <IconButton aria-label="modify" component="span" color="primary">
          <NotificationsIcon />
        </IconButton>
        <IconButton color="error" aria-label="delete" component="span">
          <DeleteIcon />
        </IconButton>
      </React.Fragment>
    );
  }

  return (
    <Accordion expanded={false} disableGutters={true} square>
      <AccordionSummary
        style={{
          backgroundColor: "rgba(0, 0, 0, .03)",
          flexWrap: "wrap",
        }}
      >
        <Typography component={"span"} style={{ wordBreak: "break-word" }}>
          {`Test Name: ${testName}`}
          <br />
          {`Method: ${testMethod}`}
          <br />
          {`Test Class: ${testClass}`}
          <br />
          {`Silenced Until: ${silencedUntil} Remaining Time: 2:50`}
        </Typography>

        <Stack
          sx={{ ml: "auto", display: { md: "none", lg: "none", xl: "none" } }}
        >
          <Actions />
        </Stack>
        <Stack
          direction="row"
          sx={{
            ml: "auto",
            display: { xs: "none", sm: "none", md: "flex", lg: "flex" },
          }}
        >
          <Actions />
        </Stack>
      </AccordionSummary>
    </Accordion>
  );
}
