import React, { useEffect } from "react";
import { useInterval } from "react-powerhooks";

import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Tooltip from "@material-ui/core/Tooltip";
import Divider from "@material-ui/core/Divider";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import FormControl from "@material-ui/core/FormControl";
import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Chip from "@material-ui/core/Chip";
import Switch from "@material-ui/core/Switch";
import Typography from "@material-ui/core/Typography";
import Zoom from "@material-ui/core/Zoom";

import CircularProgress from "@material-ui/core/CircularProgress";
import CachedIcon from "@material-ui/icons/Cached";
import GetAppIcon from "@material-ui/icons/GetApp";
import AppsIcon from "@material-ui/icons/Apps";
import EditIcon from "@material-ui/icons/Edit";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import AddIcon from "@material-ui/icons/Add";
import PublishIcon from "@material-ui/icons/Publish";
//import JSONPretty from 'react-json-pretty';
//import JSONPrettyMon from 'react-json-pretty/dist/monikai'
import ReactJson from "react-json-view";

import { Link } from "react-router-dom";
import { useAlert } from "react-alert";
import ChipInput from "material-ui-chip-input";

import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
import BubbleChartIcon from "@material-ui/icons/BubbleChart";
import RestoreIcon from "@material-ui/icons/Restore";

import mobileImage from "../assets/img/mobile.svg";
import bagImage from "../assets/img/bag.svg";
import bookImage from "../assets/img/book.svg";

import {
  DataGrid,
  GridToolbarContainer,
  GridDensitySelector,
  GridToolbar,
} from "@material-ui/data-grid";
import { makeStyles } from "@material-ui/core/styles";

import ListIcon from "@material-ui/icons/List";
import GridOnIcon from "@material-ui/icons/GridOn";

const inputColor = "#383B40";
const surfaceColor = "#27292D";

const flexContainerStyle = {
  display: "flex",
  flexDirection: "row",
  justifyContent: "left",
  alignContent: "space-between",
};

const flexBoxStyle = {
  height: 125,
  borderRadius: 4,
  boxSizing: "border-box",
  letterSpacing: "0.4px",
  color: "#D6791E",
  margin: 10,
  flex: 1,
};

//const activeWorkflowStyle = {backgroundColor: "#FFF5EE"}
//const notificationStyle = {backgroundColor: "#E5F9FF"}
//const activeWorkflowStyle = {backgroundColor: "#3d3f43"}
const availableWorkflowStyle = { backgroundColor: "#3d3f43" };
const notificationStyle = { backgroundColor: "#3d3f43" };
const activeWorkflowStyle = { backgroundColor: "#3d3f43" };

const flexContentStyle = {
  display: "flex",
  flexDirection: "row",
};

const iconStyle = {
  width: "75px",
  height: "75px",
  padding: "20px",
};

const fontSize_16 = { fontSize: "16px" };
const counterStyle = { fontSize: "36px", fontWeight: "bold" };
const blockRightStyle = {
  textAlign: "right",
  padding: "20px 20px 0px 0px",
  width: "100%",
};

export const validateJson = (showResult) => {
  //showResult = showResult.split(" None").join(" \"None\"")
  showResult = showResult.split(" False").join(" false");
  showResult = showResult.split(" True").join(" true");

  var jsonvalid = true;
  try {
    const tmp = String(JSON.parse(showResult));
    if (!showResult.includes("{") && !showResult.includes("[")) {
      jsonvalid = false;
    }
  } catch (e) {
    showResult = showResult.split("'").join('"');

    try {
      const tmp = String(JSON.parse(showResult));
      if (!showResult.includes("{") && !showResult.includes("[")) {
        jsonvalid = false;
      }
    } catch (e) {
      jsonvalid = false;
    }
  }

  const result = jsonvalid ? JSON.parse(showResult) : showResult;
  //console.log("VALID: ", jsonvalid, result)
  return {
    valid: jsonvalid,
    result: result,
  };
};

const MyView = (props) => {
  const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
  document.title = "Shuffle - Workflows";

  const alert = useAlert();

  var upload = "";
  const [file, setFile] = React.useState("");

  const [workflows, setWorkflows] = React.useState([]);
  const [selectedWorkflow, setSelectedWorkflow] = React.useState({});
  const [selectedExecution, setSelectedExecution] = React.useState({});
  const [workflowExecutions, setWorkflowExecutions] = React.useState([]);
  const [firstrequest, setFirstrequest] = React.useState(true);
  const [workflowDone, setWorkflowDone] = React.useState(false);
  const [, setTrackingId] = React.useState("");
  const [selectedWorkflowId, setSelectedWorkflowId] = React.useState("");

  const [collapseJson, setCollapseJson] = React.useState(false);
  const [field1, setField1] = React.useState("");
  const [field2, setField2] = React.useState("");
  const [downloadUrl, setDownloadUrl] = React.useState(
    "https://github.com/frikky/shuffle-workflows"
  );
  const [downloadBranch, setDownloadBranch] = React.useState("master");
  const [loadWorkflowsModalOpen, setLoadWorkflowsModalOpen] =
    React.useState(false);

  const [modalOpen, setModalOpen] = React.useState(false);
  const [newWorkflowName, setNewWorkflowName] = React.useState("");
  const [newWorkflowDescription, setNewWorkflowDescription] =
    React.useState("");
  const [newWorkflowTags, setNewWorkflowTags] = React.useState([]);
  const [update, setUpdate] = React.useState("test");
  const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
  const [editingWorkflow, setEditingWorkflow] = React.useState({});
  const [executionLoading, setExecutionLoading] = React.useState(false);
  const [view, setView] = React.useState("grid");
  const { start, stop } = useInterval({
    duration: 5000,
    startImmediate: false,
    callback: () => {
      //getWorkflowExecution(selectedWorkflow.id)
    },
  });

  // DEBUG HERE
  const handleClickLogout = () => {};

  const deleteModal = deleteModalOpen ? (
    <Dialog
      open={deleteModalOpen}
      onClose={() => {
        setDeleteModalOpen(false);
        setSelectedWorkflowId("");
      }}
      PaperProps={{
        style: {
          backgroundColor: surfaceColor,
          color: "white",
          minWidth: 500,
        },
      }}
    >
      <DialogTitle>
        <div style={{ textAlign: "center", color: "rgba(255,255,255,0.9)" }}>
          Are you sure? <div />
          Other workflows relying on this one may stop working
        </div>
      </DialogTitle>
      <DialogContent
        style={{ color: "rgba(255,255,255,0.65)", textAlign: "center" }}
      >
        <Button
          style={{}}
          onClick={() => {
            console.log("Editing: ", editingWorkflow);
            if (selectedWorkflowId) {
              deleteWorkflow(selectedWorkflowId);
              getAvailableWorkflows();
            }
            setDeleteModalOpen(false);
          }}
          color="primary"
        >
          Yes
        </Button>
        <Button
          variant="outlined"
          style={{}}
          onClick={() => {
            setDeleteModalOpen(false);
          }}
          color="primary"
        >
          No
        </Button>
      </DialogContent>
    </Dialog>
  ) : null;

  const getAvailableWorkflows = () => {
    fetch(globalUrl + "/api/v1/workflows", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200 for workflows :O!");
          return;
        }
        return response.json();
      })
      .then((responseJson) => {
        setSelectedExecution({});
        setWorkflowExecutions([]);

        if (responseJson !== undefined) {
          setWorkflows(responseJson);
          setWorkflowDone(true);
        } else {
          if (isLoggedIn) {
            alert.error("An error occurred while loading workflows");
          } else {
            handleClickLogout();
          }

          return;
        }

        if (responseJson.length > 0) {
          setSelectedWorkflow(responseJson[0]);
          //getWorkflowExecution(responseJson[0].id)
        }
      })
      .catch((error) => {
        alert.error(error.toString());
      });
  };

  useEffect(() => {
    if (workflows.length <= 0 && firstrequest) {
      setFirstrequest(false);
      getAvailableWorkflows();
    }
  });

  const viewStyle = {
    color: "#ffffff",
    width: "100%",
    display: "flex",
    minWidth: 1024,
    maxWidth: 1024,
    margin: "auto",
    /*maxHeight: "90vh",*/
  };

  const emptyWorkflowStyle = {
    paddingTop: "200px",
    width: 1024,
    margin: "auto",
  };

  const boxStyle = {
    padding: "20px 20px 20px 20px",
    width: "100%",
    height: "250px",
    color: "white",
    backgroundColor: surfaceColor,
    display: "flex",
    flexDirection: "column",
  };

  const scrollStyle = {
    marginTop: "10px",
    overflow: "scroll",
    height: "90%",
    overflowX: "hidden",
    overflowY: "auto",
  };

  const paperAppContainer = {
    display: "flex",
    flexWrap: "wrap",
    alignContent: "space-between",
  };

  const paperAppStyle = {
    minHeight: 130,
    width: "100%",
    color: "white",
    backgroundColor: surfaceColor,
    padding: "12px 12px 0px 15px",
    borderRadius: 5,
    display: "flex",
    boxSizing: "border-box",
    position: "relative",
  };

  const gridContainer = {
    height: "auto",
    color: "white",
    margin: "10px",
    backgroundColor: surfaceColor,
  };

  const workflowActionStyle = {
    flex: "1",
    display: "flex",
    width: 150,
    height: 44,
    justifyContent: "space-between",
    overflow: "hidden",
  };

  const getWorkflowExecution = (id) => {
    setExecutionLoading(true);
    fetch(globalUrl + "/api/v1/workflows/" + id + "/executions", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        setExecutionLoading(false);
        if (response.status !== 200) {
          console.log("Status not 200 for WORKFLOW EXECUTION :O!");
        }

        return response.json();
      })
      .then((responseJson) => {
        if (responseJson.success === false) {
          alert.error("Failed getting executions");
        } else {
          if (responseJson.length > 0) {
            setSelectedExecution(responseJson[0]);
            setWorkflowExecutions(responseJson);
          } else {
            //alert.info("Couldn't find executions for the workflow")
            setSelectedExecution({});
            setWorkflowExecutions([]);
          }
        }
      })
      .catch((error) => {
        setExecutionLoading(false);
        alert.error(error.toString());
      });
  };

  const abortExecution = (workflowid, executionid) => {
    alert.success("Aborting execution");
    fetch(
      globalUrl +
        "/api/v1/workflows/" +
        workflowid +
        "/executions/" +
        executionid +
        "/abort",
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        credentials: "include",
      }
    )
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200 for WORKFLOW EXECUTION :O!");
        }
        //getWorkflowExecution(workflowid)

        return response.json();
      })
      .catch((error) => {
        alert.error(error.toString());
      });
  };

  const executeWorkflow = (id) => {
    alert.show("Executing workflow " + id);
    setTrackingId(id);
    fetch(globalUrl + "/api/v1/workflows/" + id + "/execute", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200 for WORKFLOW EXECUTION :O!");
        }

        return response.json();
      })
      .then((responseJson) => {
        if (!responseJson.success) {
          alert.error(responseJson.reason);
        }
      })
      .catch((error) => {
        alert.error(error.toString());
      });

    if (id === selectedWorkflow.id) {
      sleep(2000).then(() => {
        stop();
        start();
      });
    }
  };

  function sleep(time) {
    return new Promise((resolve) => setTimeout(resolve, time));
  }

  const exportAllWorkflows = () => {
    for (var key in workflows) {
      exportWorkflow(workflows[key]);
    }
  };

  const exportWorkflow = (data) => {
    console.log("export");
    let dataStr = JSON.stringify(data);

    let dataUri =
      "data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
    let exportFileDefaultName = data.name + ".json";

    data["owner"] = "";
    for (var key in data.triggers) {
      const trigger = data.triggers[key];
      if (trigger.app_name === "Shuffle Workflow") {
        if (trigger.parameters.length > 2) {
          trigger.parameters[2].value = "";
        }
      }

      if (trigger.status == "running") {
        trigger.status = "stopped";
      }
    }

    for (var key in data.actions) {
      data.actions[key].authentication_id = "";
    }

    //return

    data["org"] = [];
    data["org_id"] = "";
    data.execution_org = { id: "" };
    console.log(data);

    let linkElement = document.createElement("a");
    linkElement.setAttribute("href", dataUri);
    linkElement.setAttribute("download", exportFileDefaultName);
    linkElement.click();
  };

  const copyWorkflow = (data) => {
    data = JSON.parse(JSON.stringify(data));
    alert.success("Copying workflow " + data.name);
    console.log("data: ", data);
    data.id = "";
    data.name = data.name + "_copy";
    //return

    fetch(globalUrl + "/api/v1/workflows", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(data),
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200 for workflows :O!");
          return;
        }
        return response.json();
      })
      .then((responseJson) => {
        getAvailableWorkflows();
      })
      .catch((error) => {
        alert.error(error.toString());
      });
  };

  const deleteWorkflow = (id) => {
    alert.success("Deleted workflow " + id);
    fetch(globalUrl + "/api/v1/workflows/" + id, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200 for setting workflows :O!");
        }

        return response.json();
      })
      .then((responseJson) => {
        getAvailableWorkflows();
      })
      .catch((error) => {
        alert.error(error.toString());
      });
  };

  const getWorkflowMeta = (data) => {
    let triggers = 0;
    let schedules = 0;
    let webhooks = 0;
    let subflows = 0;
    if (
      data.triggers !== undefined &&
      data.triggers !== null &&
      data.triggers.length > 0
    ) {
      triggers = data.triggers.length;
      for (let key in data.triggers) {
        if (data.triggers[key].app_name === "Webhook") {
          webhooks += 1;
          //webhookImg = data.triggers[key].large_image
        } else if (data.triggers[key].app_name === "Schedule") {
          schedules += 1;
          //scheduleImg = data.triggers[key].large_image
        } else if (data.triggers[key].app_name === "Subflow") {
          subflows += 1;
        }
      }
    }

    return [triggers, schedules, webhooks, subflows];
  };

  // dropdown with copy etc I guess
  const WorkflowPaper = (props) => {
    const { data } = props;
    const [open, setOpen] = React.useState(false);
    const [anchorEl, setAnchorEl] = React.useState(null);

    var boxWidth = "2px";
    if (selectedWorkflow.id === data.id) {
      boxWidth = "4px";
    }

    var boxColor = "#FECC00";
    if (data.is_valid) {
      boxColor = "#86c142";
    }

    if (!data.previously_saved) {
      boxColor = "#f85a3e";
    }

    const menuClick = (event) => {
      setOpen(!open);
      setAnchorEl(event.currentTarget);
    };

    var parsedName = data.name;
    if (
      parsedName !== undefined &&
      parsedName !== null &&
      parsedName.length > 25
    ) {
      parsedName = parsedName.slice(0, 25) + "..";
    }

    const actions = data.actions !== null ? data.actions.length : 0;
    const [triggers, schedules, webhooks, subflows] = getWorkflowMeta(data);

    return (
      <Grid item xs={4} style={{ padding: "12px 10px 12px 10px" }}>
        <Paper square style={paperAppStyle}>
          <div
            style={{
              position: "absolute",
              bottom: 1,
              left: 1,
              height: 12,
              width: 12,
              backgroundColor: boxColor,
              borderRadius: "0 100px 0 0",
            }}
          />
          <Grid
            item
            style={{ display: "flex", flexDirection: "column", width: "100%" }}
          >
            <Grid item style={{ flex: 1, display: "flex", maxHeight: 34 }}>
              <Typography
                variant="h6"
                style={{ marginBottom: 0, paddingBottom: 0, maxHeight: 30 }}
              >
                {parsedName}
              </Typography>
            </Grid>
            <Grid item style={workflowActionStyle}>
              <Tooltip color="primary" title="Action amount" placement="bottom">
                <span style={{ color: "#979797", display: "flex" }}>
                  <BubbleChartIcon
                    style={{ marginTop: "auto", marginBottom: "auto" }}
                  />
                  <Typography
                    style={{
                      marginLeft: 5,
                      marginTop: "auto",
                      marginBottom: "auto",
                    }}
                  >
                    {actions}
                  </Typography>
                </span>
              </Tooltip>
              <Tooltip
                color="primary"
                title="Trigger amount"
                placement="bottom"
              >
                <span
                  style={{ marginLeft: 15, color: "#979797", display: "flex" }}
                >
                  <RestoreIcon
                    style={{
                      color: "#979797",
                      marginTop: "auto",
                      marginBottom: "auto",
                    }}
                  />
                  <Typography
                    style={{
                      marginLeft: 5,
                      marginTop: "auto",
                      marginBottom: "auto",
                    }}
                  >
                    {triggers}
                  </Typography>
                </span>
              </Tooltip>
              <Tooltip color="primary" title="Subflows used" placement="bottom">
                <span
                  style={{ marginLeft: 15, display: "flex", color: "#979797" }}
                >
                  <svg
                    width="18"
                    height="18"
                    viewBox="0 0 18 18"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    style={{
                      color: "#979797",
                      marginTop: "auto",
                      marginBottom: "auto",
                    }}
                  >
                    <path
                      d="M0 0H15V15H0V0ZM16 16H18V18H16V16ZM16 13H18V15H16V13ZM16 10H18V12H16V10ZM16 7H18V9H16V7ZM16 4H18V6H16V4ZM13 16H15V18H13V16ZM10 16H12V18H10V16ZM7 16H9V18H7V16ZM4 16H6V18H4V16Z"
                      fill="#979797"
                    />
                  </svg>
                  <Typography
                    style={{
                      marginLeft: 5,
                      marginTop: "auto",
                      marginBottom: "auto",
                    }}
                  >
                    {subflows}
                  </Typography>
                </span>
              </Tooltip>
              {/*
							<Tooltip color="primary" title={`Actions: ${data.actions.length}`} placement="bottom">
								<AppsIcon />
							</Tooltip>
								<Tooltip color="primary" title={`Webhooks: ${webhooks}`} placement="bottom">
										<RestoreIcon />
								</Tooltip>
							: null}
							{schedules > 0 ? 
								<Tooltip color="primary" title={`Schedules: ${schedules}`} placement="bottom">
										<RestoreIcon />
								</Tooltip>
							: null}
							*/}
            </Grid>
            <Grid
              item
              style={{
                flex: "1",
                justifyContent: "left",
                overflow: "hidden",
                marginTop: 5,
              }}
            >
              {data.tags !== undefined
                ? data.tags.map((tag, index) => {
                    if (index >= 3) {
                      return null;
                    }

                    return (
                      <Chip
                        key={index}
                        style={{
                          backgroundColor: "#3d3f43",
                          height: 30,
                          marginRight: 5,
                          paddingLeft: 5,
                          paddingRight: 5,
                          height: 28,
                          cursor: "pointer",
                          borderColor: "#3d3f43",
                          color: "white",
                        }}
                        label={tag}
                        variant="outlined"
                        color="primary"
                      />
                    );
                  })
                : null}
            </Grid>
          </Grid>
          {data.actions !== undefined && data.actions !== null ? (
            <Grid
              item
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
              }}
            >
              <Grid>
                <IconButton
                  aria-label="more"
                  aria-controls="long-menu"
                  aria-haspopup="true"
                  style={{ color: "white" }}
                  onClick={menuClick}
                  style={{ padding: "0px", color: "white", color: "#979797" }}
                >
                  <MoreVertIcon />
                </IconButton>
                <Menu
                  id="long-menu"
                  anchorEl={anchorEl}
                  keepMounted
                  open={open}
                  onClose={() => {
                    setOpen(false);
                    setAnchorEl(null);
                  }}
                >
                  <MenuItem
                    style={{ backgroundColor: inputColor, color: "white" }}
                    onClick={() => {
                      setModalOpen(true);
                      setEditingWorkflow(data);
                      setNewWorkflowName(data.name);
                      setNewWorkflowDescription(data.description);
                      if (data.tags !== undefined && data.tags !== null) {
                        setNewWorkflowTags(
                          JSON.parse(JSON.stringify(data.tags))
                        );
                      }
                    }}
                    key={"change"}
                  >
                    {"Change details"}
                  </MenuItem>
                  <MenuItem
                    style={{ backgroundColor: inputColor, color: "white" }}
                    onClick={() => {
                      copyWorkflow(data);
                      setOpen(false);
                    }}
                    key={"copy"}
                  >
                    {"Copy"}
                  </MenuItem>
                  <MenuItem
                    style={{ backgroundColor: inputColor, color: "white" }}
                    onClick={() => {
                      exportWorkflow(data);
                      setOpen(false);
                    }}
                    key={"export"}
                  >
                    {"Export"}
                  </MenuItem>
                  <MenuItem
                    style={{ backgroundColor: inputColor, color: "white" }}
                    onClick={() => {
                      setDeleteModalOpen(true);
                      setSelectedWorkflowId(data.id);
                      setOpen(false);
                    }}
                    key={"delete"}
                  >
                    {"Delete"}
                  </MenuItem>
                </Menu>
              </Grid>
              <Grid>
                <Link to={"/workflows/" + data.id}>
                  <Tooltip title="Edit workflow" placement="bottom">
                    <EditIcon
                      style={{
                        background: "#F85A3E",
                        borderRadius: "4px",
                        color: "black",
                        height: 20,
                        width: 20,
                        padding: 7,
                        fontSize: "small",
                      }}
                    />
                  </Tooltip>
                </Link>
              </Grid>
            </Grid>
          ) : null}
        </Paper>
      </Grid>
    );
  };

  const executionPaper = (data) => {
    var boxWidth = "2px";
    if (selectedExecution.execution_id === data.execution_id) {
      boxWidth = "4px";
    }

    var boxColor = "orange";
    if (
      data.status === "ABORTED" ||
      data.status === "UNFINISHED" ||
      data.status === "FAILURE"
    ) {
      boxColor = "red";
    } else if (data.status === "FINISHED") {
      boxColor = "green";
    }

    var t = new Date(data.started_at * 1000);
    if (data.workflow.actions === null || data.workflow.actions === undefined) {
      return null;
    }

    if (data.workflow.actions === null || data.workflow.actions === undefined) {
      return null;
    }

    var actions = data.workflow.actions.length;
    if (data.results !== null) {
      var results = data.results.length;
    }

    return (
      <Paper
        key={data.execution_id}
        square
        style={paperAppStyle}
        onClick={() => {
          setSelectedExecution(data);
        }}
      >
        <div
          style={{
            marginLeft: "10px",
            marginTop: "5px",
            marginBottom: "5px",
            width: boxWidth,
            backgroundColor: boxColor,
          }}
        />
        <Grid container style={{ margin: "10px 10px 10px 10px", flex: 1 }}>
          <Grid
            style={{ display: "flex", flexDirection: "column", width: "100%" }}
          >
            <Grid item style={{ flex: 1, display: "flex" }}>
              <div style={{ flex: "5" }}>
                <h3 style={{ marginBottom: "0px", marginTop: "10px" }}>
                  <b>Status</b>: {data.status}
                </h3>
                Actions: {results}/{actions}
              </div>
              <div style={{ flex: "1", marginTop: "10px" }}>
                <Button
                  style={{}}
                  color="primary"
                  disabled={
                    data.status === "FAILURE" ||
                    data.status === "ABORTED" ||
                    data.status === "FINISHED"
                  }
                  variant="outlined"
                  onClick={() =>
                    abortExecution(data.workflow_id, data.execution_id)
                  }
                >
                  Abort
                </Button>
              </div>
            </Grid>
            <div style={{ display: "flex", flex: "1" }}>
              <Grid item style={{ flex: "10", justifyContent: "center" }}>
                Started: {t.toISOString()}
              </Grid>
            </div>
          </Grid>
        </Grid>
      </Paper>
    );
  };

  const dividerColor = "rgb(225, 228, 232)";

  const resultPaperAppStyle = {
    minHeight: "100px",
    minWidth: "100%",
    overflow: "hidden",
    maxWidth: "100%",
    marginTop: "5px",
    color: "white",
    backgroundColor: surfaceColor,
    display: "flex",
  };

  function replaceAll(string, search, replace) {
    return string.split(search).join(replace);
  }

  const resultsPaper = (data) => {
    var boxWidth = "2px";
    var boxColor = "orange";
    if (
      data.status === "ABORTED" ||
      data.status === "UNFINISHED" ||
      data.status === "FAILURE"
    ) {
      boxColor = "red";
    } else if (data.status === "FINISHED" || data.status === "SUCCESS") {
      boxColor = "green";
    } else if (data.status === "SKIPPED" || data.status === "EXECUTING") {
      boxColor = "yellow";
    } else {
      boxColor = "green";
    }

    var t = new Date(data.started_at * 1000);
    var showResult = data.result.trim();
    const validate = validateJson(showResult);

    if (validate.valid) {
      showResult = (
        <ReactJson
          src={validate.result}
          theme="solarized"
          collapsed={collapseJson}
          displayDataTypes={false}
          name={"Results for " + data.action.label}
        />
      );
    } else {
      // FIXME - have everything parsed as json, either just for frontend
      // or in the backend?
      /*	
			const newdata = {"result": data.result}
			showResult = <ReactJson 
				src={JSON.parse(newdata)} 
				theme="solarized" 
				collapsed={collapseJson}
				displayDataTypes={false}
				name={"Results for "+data.action.name}
			/>
			*/
    }

    return (
      <Paper
        key={data.execution_id}
        square
        style={resultPaperAppStyle}
        onClick={() => {}}
      >
        <div
          style={{
            marginLeft: "10px",
            marginTop: "5px",
            marginBottom: "5px",
            marginRight: "5px",
            width: boxWidth,
            backgroundColor: boxColor,
          }}
        ></div>
        <Grid container style={{ margin: "10px 10px 10px 10px", flex: "1" }}>
          <Grid
            style={{ display: "flex", flexDirection: "column", width: "100%" }}
          >
            <Grid item style={{ flex: "1" }}>
              <h4 style={{ marginBottom: "0px", marginTop: "10px" }}>
                <b>Name</b>: {data.action.label}
              </h4>
            </Grid>
            <Grid item style={{ flex: "1", justifyContent: "center" }}>
              App: {data.action.app_name}, Version: {data.action.app_version}
            </Grid>
            <Grid item style={{ flex: "1", justifyContent: "center" }}>
              Action: {data.action.name}, Environment: {data.action.environment}
              , Status: {data.status}
            </Grid>
            <div style={{ display: "flex", flex: "1" }}>
              <Grid item style={{ flex: "10", justifyContent: "center" }}>
                Started: {t.toISOString()}
              </Grid>
            </div>
            <Divider
              style={{
                marginBottom: "10px",
                marginTop: "10px",
                height: "1px",
                width: "100%",
                backgroundColor: dividerColor,
              }}
            />
            <div style={{ display: "flex", flex: "1" }}>
              <Grid item style={{ flex: "10", justifyContent: "center" }}>
                {showResult}
              </Grid>
            </div>
          </Grid>
        </Grid>
      </Paper>
    );
  };

  const resultsHandler =
    Object.getOwnPropertyNames(selectedExecution).length > 0 &&
    selectedExecution.results !== null ? (
      <div>
        {selectedExecution.results
          .sort((a, b) => a.started_at - b.started_at)
          .map((data, index) => {
            return <div key={index}>{resultsPaper(data)}</div>;
          })}
      </div>
    ) : (
      <div>No results yet</div>
    );

  const resultsLength =
    Object.getOwnPropertyNames(selectedExecution).length > 0 &&
    selectedExecution.results !== null
      ? selectedExecution.results.length
      : 0;

  const ExecutionDetails = () => {
    var starttime = new Date(selectedExecution.started_at * 1000);
    var endtime = new Date(selectedExecution.started_at * 1000);

    var parsedArgument = selectedExecution.execution_argument;
    if (
      selectedExecution.execution_argument !== undefined &&
      selectedExecution.execution_argument.length > 0
    ) {
      parsedArgument = replaceAll(parsedArgument, " None", ' "None"');
    }

    var arg = null;
    if (
      selectedExecution.execution_argument !== undefined &&
      selectedExecution.execution_argument.length > 0
    ) {
      var showResult = selectedExecution.execution_argument.trim();
      const validate = validateJson(showResult);

      arg = validate.valid ? (
        <ReactJson
          src={validate.result}
          theme="solarized"
          collapsed={true}
          displayDataTypes={false}
          name={"Execution argument / webhook"}
        />
      ) : (
        showResult
      );
    }

    var lastresult = null;
    if (
      selectedExecution.result !== undefined &&
      selectedExecution.result.length > 0
    ) {
      var showResult = selectedExecution.result.trim();
      const validate = validateJson(showResult);
      lastresult = validate.valid ? (
        <ReactJson
          src={validate.result}
          theme="solarized"
          collapsed={true}
          displayDataTypes={false}
          name={"Last result from execution"}
        />
      ) : (
        showResult
      );
    }

    /*
		<div>
			ID: {selectedExecution.execution_id}
		</div>
		<div>
			<b>Last node:</b> {selectedExecution.workflow.actions.find(data => data.id === selectedExecution.last_node).actions[0].label}
		</div>
		*/
    if (
      Object.getOwnPropertyNames(selectedExecution).length > 0 &&
      selectedExecution.workflow.actions !== null
    ) {
      return (
        <div style={{ overflowX: "hidden" }}>
          <div>
            <b>Status:</b> {selectedExecution.status}
          </div>
          <div>
            <b>Started:</b> {starttime.toISOString()}
          </div>
          <div>
            <b>Finished:</b> {endtime.toISOString()}
          </div>
          {/*
					<div>
						<b>Last Result:</b> {lastresult}
					</div>
					*/}
          <div style={{ marginTop: 10 }}>{arg}</div>
          <Divider
            style={{
              marginBottom: "10px",
              marginTop: "10px",
              height: "1px",
              width: "100%",
              backgroundColor: dividerColor,
            }}
          />
          {resultsHandler}
        </div>
      );
    }

    return executionLoading ? (
      <div style={{ marginTop: 25, textAlign: "center" }}>
        <CircularProgress />
      </div>
    ) : (
      <h4>
        There are no executiondetails yet. Click "execute" to run your first
        one.
      </h4>
    );
  };

  const ExecutionsView = () => {
    if (workflowExecutions.length > 0) {
      const sortedWorkflows = workflowExecutions
        .sort((a, b) => a.started_at - b.started_at)
        .reverse();

      return (
        <div>
          {sortedWorkflows.map((data) => {
            return executionPaper(data);
          })}
        </div>
      );
    }
    return executionLoading ? (
      <div style={{ marginTop: 25, textAlign: "center" }}>
        <CircularProgress />
      </div>
    ) : (
      <h4>
        Executions have been moved to the Workflow itself. <div />
        <Link
          to={`/workflows/${selectedWorkflow.id}?view=executions`}
          style={{ textDecoration: "none", color: "#f85a3e" }}
        >
          Click here to see them
        </Link>
      </h4>
    );
  };

  // Can create and set workflows
  const setNewWorkflow = (
    name,
    description,
    tags,
    editingWorkflow,
    redirect
  ) => {
    var method = "POST";
    var extraData = "";
    var workflowdata = {};

    if (editingWorkflow.id !== undefined) {
      console.log("Building original workflow");
      method = "PUT";
      extraData = "/" + editingWorkflow.id;
      workflowdata = editingWorkflow;

      console.log("REMOVING OWNER");
      workflowdata["owner"] = "";
      // FIXME: Loop triggers and turn them off?
    }

    workflowdata["name"] = name;
    workflowdata["description"] = description;
    if (tags !== undefined) {
      workflowdata["tags"] = tags;
    }
    //console.log(workflowdata)
    //return

    return fetch(globalUrl + "/api/v1/workflows" + extraData, {
      method: method,
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(workflowdata),
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200 for workflows :O!");
          return;
        }
        return response.json();
      })
      .then((responseJson) => {
        if (method === "POST" && redirect) {
          window.location.pathname = "/workflows/" + responseJson["id"];
        } else if (!redirect) {
          // Update :)
          getAvailableWorkflows();
        } else {
          alert.info("Successfully changed basic info for workflow");
        }

        return responseJson;
      })
      .catch((error) => {
        alert.error(error.toString());
      });
  };

  const importFiles = (event) => {
    console.log("Importing!");
    const file = event.target.value;
    if (event.target.files.length > 0) {
      for (var key in event.target.files) {
        const file = event.target.files[key];
        if (file.type !== "application/json") {
          if (file.type !== undefined) {
            alert.error("File has to contain valid json");
          }

          continue;
        }

        const reader = new FileReader();
        // Waits for the read
        reader.addEventListener("load", (event) => {
          var data = reader.result;
          try {
            data = JSON.parse(reader.result);
          } catch (e) {
            alert.error("Invalid JSON: " + e);
            return;
          }

          // Initialize the workflow itself
          const ret = setNewWorkflow(
            data.name,
            data.description,
            data.tags,
            {},
            false
          )
            .then((response) => {
              if (response !== undefined) {
                // SET THE FULL THING
                data.id = response.id;

                // Actually create it
                const ret = setNewWorkflow(
                  data.name,
                  data.description,
                  data.tags,
                  data,
                  false
                ).then((response) => {
                  if (response !== undefined) {
                    alert.success("Successfully imported " + data.name);
                  }
                });
              }
            })
            .catch((error) => {
              alert.error("Import error: " + error.toString());
            });
        });

        // Actually reads
        reader.readAsText(file);
      }
    }

    setLoadWorkflowsModalOpen(false);
  };

  const modalView = modalOpen ? (
    <Dialog
      open={modalOpen}
      onClose={() => {
        setModalOpen(false);
      }}
      PaperProps={{
        style: {
          backgroundColor: surfaceColor,
          color: "white",
          minWidth: "800px",
        },
      }}
    >
      <DialogTitle>
        <div style={{ color: "rgba(255,255,255,0.9)" }}>
          {editingWorkflow.id !== undefined ? "Editing" : "New"} workflow
          <div style={{ float: "right" }}>
            <Tooltip color="primary" title={"Import manually"} placement="top">
              <Button
                color="primary"
                style={{}}
                variant="text"
                onClick={() => upload.click()}
              >
                <PublishIcon />
              </Button>
            </Tooltip>
          </div>
        </div>
      </DialogTitle>
      <FormControl>
        <DialogContent>
          <TextField
            onBlur={(event) => setNewWorkflowName(event.target.value)}
            InputProps={{
              style: {
                color: "white",
              },
            }}
            color="primary"
            placeholder="Name"
            margin="dense"
            defaultValue={newWorkflowName}
            fullWidth
          />
          <TextField
            onBlur={(event) => setNewWorkflowDescription(event.target.value)}
            InputProps={{
              style: {
                color: "white",
              },
            }}
            color="primary"
            defaultValue={newWorkflowDescription}
            placeholder="Description"
            margin="dense"
            fullWidth
          />
          <ChipInput
            style={{ marginTop: 10 }}
            InputProps={{
              style: {
                color: "white",
              },
            }}
            placeholder="Tags"
            color="primary"
            fullWidth
            value={newWorkflowTags}
            onAdd={(chip) => {
              newWorkflowTags.push(chip);
              setNewWorkflowTags(newWorkflowTags);
            }}
            onDelete={(chip, index) => {
              newWorkflowTags.splice(index, 1);
              setNewWorkflowTags(newWorkflowTags);
              setUpdate("delete " + chip);
            }}
          />
        </DialogContent>
        <DialogActions>
          <Button
            style={{}}
            onClick={() => {
              setNewWorkflowName("");
              setNewWorkflowDescription("");
              setEditingWorkflow({});
              setNewWorkflowTags([]);
              setModalOpen(false);
            }}
            color="primary"
          >
            Cancel
          </Button>
          <Button
            style={{}}
            disabled={newWorkflowName.length === 0}
            onClick={() => {
              console.log("Tags: ", newWorkflowTags);
              if (editingWorkflow.id !== undefined) {
                setNewWorkflow(
                  newWorkflowName,
                  newWorkflowDescription,
                  newWorkflowTags,
                  editingWorkflow,
                  false
                );
                setNewWorkflowName("");
                setNewWorkflowDescription("");
                setEditingWorkflow({});
                setNewWorkflowTags([]);
              } else {
                setNewWorkflow(
                  newWorkflowName,
                  newWorkflowDescription,
                  newWorkflowTags,
                  {},
                  true
                );
              }

              setModalOpen(false);
            }}
            color="primary"
          >
            Submit
          </Button>
        </DialogActions>
      </FormControl>
    </Dialog>
  ) : null;

  const viewSize = {
    workflowView: 4,
    executionsView: 3,
    executionResults: 4,
  };

  const workflowViewStyle = {
    flex: viewSize.workflowView,
    marginLeft: "10px",
    marginRight: "10px",
  };

  if (viewSize.workflowView === 0) {
    workflowViewStyle.display = "none";
  }

  const workflowButtons = (
    <span>
      {view === "grid" && (
        <Tooltip color="primary" title={"List View"} placement="top">
          <Button
            color="primary"
            variant="text"
            onClick={() => setView("list")}
          >
            <ListIcon />
          </Button>
        </Tooltip>
      )}
      {view === "list" && (
        <Tooltip color="primary" title={"Grid View"} placement="top">
          <Button
            color="primary"
            variant="text"
            onClick={() => setView("grid")}
          >
            <GridOnIcon />
          </Button>
        </Tooltip>
      )}
      {workflows.length > 0 ? (
        <Tooltip color="primary" title={"Create new workflow"} placement="top">
          <Button
            color="primary"
            style={{}}
            variant="text"
            onClick={() => setModalOpen(true)}
          >
            <AddIcon />
          </Button>
        </Tooltip>
      ) : null}
      <Tooltip color="primary" title={"Import workflows"} placement="top">
        <Button
          color="primary"
          style={{}}
          variant="text"
          onClick={() => upload.click()}
        >
          <PublishIcon />
        </Button>
      </Tooltip>
      <input
        hidden
        type="file"
        multiple="multiple"
        ref={(ref) => (upload = ref)}
        onChange={importFiles}
      />
      {workflows.length > 0 ? (
        <Tooltip
          color="primary"
          title={`Download ALL workflows (${workflows.length})`}
          placement="top"
        >
          <Button
            color="primary"
            style={{}}
            variant="text"
            onClick={() => {
              exportAllWorkflows();
            }}
          >
            <GetAppIcon />
          </Button>
        </Tooltip>
      ) : null}
      <Tooltip color="primary" title={"Download workflows"} placement="top">
        <Button
          color="primary"
          style={{}}
          variant="text"
          onClick={() => setLoadWorkflowsModalOpen(true)}
        >
          <CloudDownloadIcon />
        </Button>
      </Tooltip>
    </span>
  );

  const useStyles = makeStyles((theme) => ({
    root: {
      border: 0,
      "& .MuiDataGrid-columnsContainer": {
        backgroundColor: theme.palette.type === "light" ? "#fafafa" : "#1d1d1d",
      },
      "& .MuiDataGrid-iconSeparator": {
        display: "none",
      },
      "& .MuiDataGrid-colCell, .MuiDataGrid-cell": {
        borderRight: `1px solid ${
          theme.palette.type === "light" ? "white" : "#303030"
        }`,
      },
      "& .MuiDataGrid-columnsContainer, .MuiDataGrid-cell": {
        borderBottom: `1px solid ${
          theme.palette.type === "light" ? "#f0f0f0" : "#303030"
        }`,
      },
      "& .MuiDataGrid-cell": {
        color:
          theme.palette.type === "light" ? "white" : "rgba(255,255,255,0.65)",
      },
      "& .MuiPaginationItem-root, .MuiTablePagination-actions, .MuiTablePagination-caption":
        {
          borderRadius: 0,
          color: "white",
        },
    },
  }));
  const classes = useStyles();

  const WorkflowGridView = () => {
    let workflowData = "";
    if (workflows.length > 0) {
      const columns = [
        { field: "title", headerName: "Title", width: 330 },
        {
          field: "actions",
          headerName: "Actions",
          width: 200,
          sortable: false,
          disableClickEventBubbling: true,
          renderCell: (params) => {
            const data = params.row.record;
            let [triggers, schedules, webhooks, subflows] =
              getWorkflowMeta(data);

            return (
              <Grid item>
                <Link to={"/workflows/" + data.id}>
                  <EditIcon
                    style={{
                      background: "#F85A3E",
                      boxShadow:
                        "0px 1px 2px rgba(0, 0, 0, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.12), 0px 1px 8px rgba(0, 0, 0, 0.1)",
                      borderRadius: "4px",
                      color: "black",
                      height: "20px",
                      width: "20px",
                      fontSize: "small",
                    }}
                  />
                </Link>
                <Tooltip
                  color="primary"
                  title="Edit workflow"
                  placement="bottom"
                >
                  <BubbleChartIcon />
                </Tooltip>
                <Tooltip
                  color="primary"
                  title="Execute workflow"
                  placement="bottom"
                >
                  <PlayArrowIcon
                    color="secondary"
                    disabled={!data.is_valid}
                    onClick={() => executeWorkflow(data.id)}
                  />
                </Tooltip>
                <Tooltip
                  color="primary"
                  title={`Actions: ${data.actions.length}`}
                  placement="bottom"
                >
                  <AppsIcon />
                </Tooltip>
                {webhooks > 0 ? (
                  <Tooltip
                    color="primary"
                    title={`Webhooks: ${webhooks}`}
                    placement="bottom"
                  >
                    <RestoreIcon />
                  </Tooltip>
                ) : null}
                {schedules > 0 ? (
                  <Tooltip
                    color="primary"
                    title={`Schedules: ${schedules}`}
                    placement="bottom"
                  >
                    <RestoreIcon />
                  </Tooltip>
                ) : null}
              </Grid>
            );
          },
        },
        {
          field: "tags",
          headerName: "Tags",
          width: 390,
          sortable: false,
          disableClickEventBubbling: true,
          renderCell: (params) => {
            const data = params.row.record;
            return (
              <Grid item>
                {data.tags !== undefined
                  ? data.tags.map((tag, index) => {
                      if (index >= 3) {
                        return null;
                      }

                      return (
                        <Chip
                          key={index}
                          style={{
                            backgroundColor: "#3d3f43",
                            height: 30,
                            marginRight: 5,
                            paddingLeft: 5,
                            paddingRight: 5,
                            height: 28,
                            cursor: "pointer",
                            borderColor: "#3d3f43",
                            color: "white",
                          }}
                          label={tag}
                          variant="outlined"
                          color="primary"
                        />
                      );
                    })
                  : null}
              </Grid>
            );
          },
        },
      ];
      let rows = [];
      rows = workflows.map((data, index) => {
        let obj = { id: index + 1, title: data.name, record: data };
        return obj;
      });
      workflowData = (
        <DataGrid
          color="primary"
          className={classes.root}
          rows={rows}
          columns={columns}
          pageSize={5}
          checkboxSelection
          autoHeight
          density="standard"
          components={{
            Toolbar: GridToolbar,
          }}
        />
      );
    }
    return <div style={gridContainer}>{workflowData}</div>;
  };

  const WorkflowView = () => {
    if (workflows.length === 0) {
      return (
        <div style={emptyWorkflowStyle}>
          <Paper style={boxStyle}>
            <div>
              <h2>Welcome to Shuffle</h2>
            </div>
            <div>
              <p>
                <b>Shuffle</b> is a flexible, easy to use, automation platform
                allowing users to integrate their services and devices freely.
                It's made to significantly reduce the amount of manual labor,
                and is focused on security applications.{" "}
                <a
                  href="/docs/about"
                  style={{ textDecoration: "none", color: "#f85a3e" }}
                >
                  Click here to learn more.
                </a>
              </p>
            </div>
            <div>
              If you want to jump straight into it, click here to create your
              first workflow:
            </div>
            <div style={{ display: "flex" }}>
              <Button
                color="primary"
                style={{ marginTop: "20px" }}
                variant="outlined"
                onClick={() => setModalOpen(true)}
              >
                New workflow
              </Button>
              <span style={{ paddingTop: 20, display: "flex" }}>
                <Typography
                  style={{ marginTop: 5, marginLeft: 30, marginRight: 15 }}
                >
                  ..OR
                </Typography>
                {workflowButtons}
              </span>
            </div>
          </Paper>
        </div>
      );
    }

    return (
      <div style={viewStyle}>
        <div style={workflowViewStyle}>
          <div style={{ display: "flex" }}>
            <div style={{ flex: "1" }}>
              <h2>Workflows</h2>
            </div>
          </div>

          <div style={flexContainerStyle}>
            <div style={{ ...flexBoxStyle, ...activeWorkflowStyle }}>
              <div style={flexContentStyle}>
                <div>
                  <img src={mobileImage} style={iconStyle} />
                </div>
                <div style={blockRightStyle}>
                  <div style={counterStyle}>{workflows.length}</div>
                  <div style={fontSize_16}>ACTIVE WORKFLOWS</div>
                </div>
              </div>
            </div>
            <div style={{ ...flexBoxStyle, ...availableWorkflowStyle }}>
              <div style={flexContentStyle}>
                <div>
                  <img src={bookImage} style={iconStyle} />
                </div>
                <div style={blockRightStyle}>
                  <div style={counterStyle}>{workflows.length}</div>
                  <div style={fontSize_16}>AVAILABE WORKFLOWS</div>
                </div>
              </div>
            </div>
            <div style={{ ...flexBoxStyle, ...notificationStyle }}>
              <div style={flexContentStyle}>
                <div>
                  <img src={bagImage} style={iconStyle} />
                </div>
                <div style={blockRightStyle}>
                  <div style={counterStyle}>{workflows.length}</div>
                  <div style={fontSize_16}>NOTIFICATIONS</div>
                </div>
              </div>
            </div>
          </div>

          <div style={{ display: "flex", margin: 20 }}>
            <div style={{ flex: 10 }}>
              <Typography>
                This is your workflow view.{" "}
                <a
                  rel="norefferer"
                  target="_blank"
                  href="https://shuffler.io/docs/workflows"
                  target="_blank"
                  style={{ textDecoration: "none", color: "#f85a3e" }}
                >
                  Learn more about Workflows
                </a>
              </Typography>
            </div>
            <div style={{ float: "right" }}>{workflowButtons}</div>
          </div>
          <div style={{ marginTop: 15 }} />
          {view === "grid" && (
            <Grid container spacing={4} style={paperAppContainer}>
              {workflows.map((data, index) => {
                return <WorkflowPaper key={index} data={data} />;
              })}
            </Grid>
          )}

          {view === "list" && <WorkflowGridView />}

          <div style={{ marginBottom: 100 }} />
        </div>
      </div>
    );
  };

  const importWorkflowsFromUrl = (url) => {
    console.log("IMPORT WORKFLOWS FROM ", downloadUrl);

    const parsedData = {
      url: url,
      field_3: downloadBranch || "master",
    };

    if (field1.length > 0) {
      parsedData["field_1"] = field1;
    }

    if (field2.length > 0) {
      parsedData["field_2"] = field2;
    }

    alert.success("Getting specific workflows from your URL.");
    var cors = "cors";
    fetch(globalUrl + "/api/v1/workflows/download_remote", {
      method: "POST",
      mode: "cors",
      headers: {
        Accept: "application/json",
      },
      body: JSON.stringify(parsedData),
      credentials: "include",
    })
      .then((response) => {
        if (response.status === 200) {
          alert.success("Successfully loaded workflows from " + downloadUrl);
          getAvailableWorkflows();
        }

        return response.json();
      })
      .then((responseJson) => {
        console.log("DATA: ", responseJson);
        if (!responseJson.success) {
          if (responseJson.reason !== undefined) {
            alert.error("Failed loading: " + responseJson.reason);
          } else {
            alert.error("Failed loading");
          }
        }
      })
      .catch((error) => {
        alert.error(error.toString());
      });
  };

  const handleGithubValidation = () => {
    importWorkflowsFromUrl(downloadUrl);
    setLoadWorkflowsModalOpen(false);
  };

  const workflowDownloadModalOpen = loadWorkflowsModalOpen ? (
    <Dialog
      open={loadWorkflowsModalOpen}
      onClose={() => {}}
      PaperProps={{
        style: {
          backgroundColor: surfaceColor,
          color: "white",
          minWidth: "800px",
          minHeight: "320px",
        },
      }}
    >
      <DialogTitle>
        <div style={{ color: "rgba(255,255,255,0.9)" }}>
          Load workflows from github repo
          <div style={{ float: "right" }}>
            <Tooltip color="primary" title={"Import manually"} placement="top">
              <Button
                color="primary"
                style={{}}
                variant="text"
                onClick={() => upload.click()}
              >
                <PublishIcon />
              </Button>
            </Tooltip>
          </div>
        </div>
      </DialogTitle>
      <DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>
        Repository (supported: github, gitlab, bitbucket)
        <TextField
          style={{ backgroundColor: inputColor }}
          variant="outlined"
          margin="normal"
          defaultValue={
            userdata.active_org.defaults.workflow_download_repo !== undefined &&
            userdata.active_org.defaults.workflow_download_repo.length > 0
              ? userdata.active_org.defaults.workflow_download_repo
              : downloadUrl
          }
          InputProps={{
            style: {
              color: "white",
              height: "50px",
              fontSize: "1em",
            },
          }}
          onChange={(e) => setDownloadUrl(e.target.value)}
          placeholder="https://github.com/frikky/shuffle-apps"
          fullWidth
        />
        <span style={{ marginTop: 10 }}>
          Branch (default value is "master"):
        </span>
        <div style={{ display: "flex" }}>
          <TextField
            style={{ backgroundColor: inputColor }}
            variant="outlined"
            margin="normal"
            defaultValue={
              userdata.active_org.defaults.workflow_download_branch !==
                undefined &&
              userdata.active_org.defaults.workflow_download_branch.length > 0
                ? userdata.active_org.defaults.workflow_download_branch
                : downloadBranch
            }
            InputProps={{
              style: {
                color: "white",
                height: "50px",
                fontSize: "1em",
              },
            }}
            onChange={(e) => setDownloadBranch(e.target.value)}
            placeholder="master"
            fullWidth
          />
        </div>
        <span style={{ marginTop: 10 }}>
          Authentication (optional - private repos etc):
        </span>
        <div style={{ display: "flex" }}>
          <TextField
            style={{ flex: 1, backgroundColor: inputColor }}
            variant="outlined"
            margin="normal"
            InputProps={{
              style: {
                color: "white",
                height: "50px",
                fontSize: "1em",
              },
            }}
            onChange={(e) => setField1(e.target.value)}
            type="username"
            placeholder="Username / APIkey (optional)"
            fullWidth
          />
          <TextField
            style={{ flex: 1, backgroundColor: inputColor }}
            variant="outlined"
            margin="normal"
            InputProps={{
              style: {
                color: "white",
                height: "50px",
                fontSize: "1em",
              },
            }}
            onChange={(e) => setField2(e.target.value)}
            type="password"
            placeholder="Password (optional)"
            fullWidth
          />
        </div>
      </DialogContent>
      <DialogActions>
        <Button
          style={{ borderRadius: "0px" }}
          onClick={() => setLoadWorkflowsModalOpen(false)}
          color="primary"
        >
          Cancel
        </Button>
        <Button
          style={{ borderRadius: "0px" }}
          disabled={downloadUrl.length === 0 || !downloadUrl.includes("http")}
          onClick={() => {
            handleGithubValidation();
          }}
          color="primary"
        >
          Submit
        </Button>
      </DialogActions>
    </Dialog>
  ) : null;

  const loadedCheck =
    isLoaded && isLoggedIn && workflowDone ? (
      <div>
        <WorkflowView />
        {modalView}
        {deleteModal}
        {workflowDownloadModalOpen}
      </div>
    ) : (
      <div
        style={{
          paddingTop: 250,
          width: 250,
          margin: "auto",
          textAlign: "center",
        }}
      >
        <CircularProgress />
        <Typography>Loading Workflows</Typography>
      </div>
    );

  // Maybe use gridview or something, idk
  return <div>{loadedCheck}</div>;
};

export default MyView;