import React, { useEffect, useState } from "react";
import moment from "moment";
import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";

const happyGreen = "#64dd17";
const happyGrey = "#e0e0e0";
export default function PipelineTriggerWidget(props) {
  const { trigger, close } = props;
  const [time, setTime] = useState(Date.now());
  const [hovering, setHovering] = useState(false);
  const hoverStop = () => setHovering(false);
  const hoverStart = () => setHovering(true);

  useEffect(() => {
    const interval = setInterval(() => setTime(Date.now()), 200);
    return () => clearInterval(interval);
  }, []);

  function runNow() {
    close();
    if (!trigger.launchTrigger) return;
    trigger.launchTrigger();
  }

  function triggerMomentRemaining() {
    if (!trigger || !trigger.triggerAt) return null;
    const now = moment();
    const diff = moment(trigger.triggerAt.diff(now)).valueOf();
    const timeString = new Date(diff).toISOString().substring(11, 19);
    return timeString; // .split(":").filter((s) => s != "00").join(":");
  }
  const normalizeValue = () => {
    const { triggerQueued: start, triggerAt: end } = trigger;
    const total = end - start;
    // TODO The below line causes issues because close is called during a render.
    // This causes MASSIVE issues, and needs to be resolved
    //if (((trigger.triggerAt - Date.now()) / total) * 100 > 100) return close();
    return ((total - (trigger.triggerAt - Date.now())) / total) * 100;
  };
  return (
    <Box sx={{ display: "flex" }}>
      <Box
        sx={{
          position: "relative",
          display: "inline-flex",
          backgroundColor: hovering ? happyGreen : "white",
          borderRadius: "50%",
          padding: 0.5,
          margin: "auto",
        }}
        onMouseEnter={hoverStart}
        onMouseLeave={hoverStop}
      >
        <CircularProgress
          size="8rem"
          variant="determinate"
          sx={{ color: happyGrey, position: "absolute" }}
          thickness={2.5}
          value={100}
        />
        <CircularProgress
          size="8rem"
          variant="determinate"
          sx={{ color: hovering ? "gray" : happyGreen }}
          thickness={2.5}
          value={normalizeValue()}
        />

        <Box
          sx={{
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            position: "absolute",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            color: "white",
          }}
        >
          <Typography
            variant="caption"
            component="div"
            color="black"
            sx={{
              // fontWeight: "bold",
              cursor: !hovering ? "inherit" : "pointer",
            }}
          >
            {!hovering && triggerMomentRemaining()}
            {hovering && (
              <React.Fragment>
                <Button
                  component="div"
                  sx={{ color: "white", fontWeight: "bold" }}
                  onClick={runNow}
                >
                  Run Now
                </Button>
                <Typography
                  variant="caption"
                  component="div"
                  color="white"
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontWeight: "bold",
                  }}
                >
                  {triggerMomentRemaining()}
                </Typography>
              </React.Fragment>
            )}
          </Typography>
        </Box>
      </Box>
    </Box>
  );
}