import {
  Box,
  Drawer,
  Grid2 as Grid,
  Theme,
  Typography,
  useTheme
} from "@mui/material";
import { grey, lightBlue, red, orange } from "@mui/material/colors";
import { makeStyles } from "@mui/styles";
import moment from "moment";
import { pond } from "protobuf-ts/pond";
import React, { useState } from "react";

interface Props {
  index: number;
  datalog: pond.Log;
}

const useStyles = makeStyles((theme: Theme) => ({
    logbox: {
      width: "100%",
      padding: theme.spacing(1),
      "&:hover": {
        filter: "brightness(1.15)",
        cursor: "pointer"
      }
    }
  })
);

export default function LogCard(props: Props) {
  const { datalog, index } = props;
  let log = datalog;
  let attributes = JSON.parse(log.attributes);
  // let elementKey = event.target.getAttribute('a-key');
  const classes = useStyles();
  const theme = useTheme();

  const [drawer, setDrawer] = useState(false);

  if (log.level === undefined) log.level = "info";

  let barColor: string = lightBlue[400];
  if (log.level.toLowerCase() === "debug") {
    barColor = grey[400];
  } else if (log.level.toLowerCase() === "warning") {
    barColor = orange[500];
  } else if (log.level.toLowerCase() === "error") {
    barColor = red[500];
  } else if (log.level.toLowerCase() === "critical") {
    barColor = red["A100"];
  }
  let bc = index % 2 === 0 ? theme.palette.background.default : theme.palette.background.paper;

  const lineSummary = () => {
    return (
      <Grid container direction="row" alignItems="left" spacing={1}>
        <Grid size={{ xs: 2.2 }} >
          {moment(log.timestamp).format("MMM Do, h:mm:ss a")}
        </Grid>
        <Grid size={{ xs: 1 }}>
          {log.service}
        </Grid>
        <Grid size={{ xs: 1 }}>
          {log.device}
        </Grid>
        <Grid size={{ xs: 2 }}>
          <Typography noWrap variant="body2">
            {log.message}
          </Typography>
        </Grid>
        <Grid size={{ xs: 5.8 }}>
          <Typography noWrap variant="body2">
            {log.attributes}
          </Typography>
        </Grid>
      </Grid>
    );
  };

  return (
    <React.Fragment>
      <Drawer open={drawer} onClose={() => setDrawer(false)} anchor="right">
        <Box maxWidth={theme.spacing(68)} minWidth={theme.spacing(62)} padding={2}>
          <Grid container direction="column" justifyContent="space-evenly">
            <Grid container direction="row">
              <Grid size={4}>
                <Typography>Device:</Typography>
              </Grid>
              <Grid>
                <Typography>{log.device}</Typography>
              </Grid>
            </Grid>
            <Grid container direction="row">
              <Grid size={4}>
                <Typography>Timestamp:</Typography>
              </Grid>
              <Grid>
                <Typography>{moment(log.timestamp).format("MMMM ddd Do, h:mm:ss a")}</Typography>
              </Grid>
            </Grid>
            <Grid container direction="row">
              <Grid size={4}>
                <Typography>Level:</Typography>
              </Grid>
              <Grid>
                <Typography>{log.level}</Typography>
              </Grid>
            </Grid>
            <Grid container direction="row">
              <Grid size={4}>
                <Typography>Service:</Typography>
              </Grid>
              <Grid>
                <Typography>{log.service}</Typography>
              </Grid>
            </Grid>
          </Grid>
          {
            <Typography variant="caption">
              <pre>{JSON.stringify(attributes, null, 2)}</pre>
            </Typography>
          }
        </Box>
      </Drawer>
      <Box
        className={classes.logbox}
        style={{ backgroundColor: bc, borderLeft: "2px solid " + barColor }}
        onClick={() => setDrawer(true)}>
        {lineSummary()}
      </Box>
    </React.Fragment>
  );
}
