import React, { useState, useEffect, useContext } from "react";

import {getTheme} from "../theme.jsx";
import ReactGA from "react-ga4";
import Markdown from "react-markdown";
import algoliasearch from "algoliasearch/lite";
import ReactJson from "react-json-view-ssr";
//import { useAlert
import { ToastContainer, toast } from "react-toastify" 
import { makeStyles, createStyles } from "@mui/styles";
import { useParams, useNavigate, Link } from "react-router-dom";

import {
  Autocomplete,
  Box,
  Zoom,
  Card,
  CardActionArea,
  Fade,
  Tabs,
  Tab,
  CircularProgress,
  DialogActions,
  Dialog,
  DialogTitle,
  DialogContent,
  Tooltip,
  IconButton,
  Menu,
  Paper,
  Button,
  Typography,
  Divider,
  MenuItem,
  Avatar,
  TextField,
  Breadcrumbs,
  Checkbox,
  Chip,
  Select,
} from "@mui/material";

import {
  Business as BusinessIcon,
  Edit as EditIcon,
  CloudDownload as CloudDownloadIcon,
  Warning as WarningIcon,
  VerifiedUser as VerifiedUserIcon,
  Close as CloseIcon,
  LockOpen as LockOpenIcon,
  PlayArrow as PlayArrowIcon,
  GetApp as GetAppIcon,
  Apps as AppsIcon,
  Description as DescriptionIcon,
  ShowChart as ShowChartIcon,
  Person as PersonIcon,
  Polyline as PolylineIcon,
  OpenInNew as OpenInNewIcon, 
} from "@mui/icons-material";

import ForkRightIcon from '@mui/icons-material/ForkRight';

import Alert from "@mui/material/Alert";
import { Context } from "../context/ContextApi.jsx";

import {
  SearchBox,
  StaticRefinementList,
  RefinementList,
  InstantSearch,
  connectSearchBox,
  connectHits,
  Index,
} from "react-instantsearch-dom";
import AppStats from "../components/AppStats.jsx";
import ParsedAction from "../components/ParsedAction.jsx";
import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
import { base64_decode, appCategories } from "../views/AppCreator.jsx";
import { triggers as workflowTriggers } from "../views/AngularWorkflow.jsx";
import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
import AuthenticationWindow from "../components/AuthenticationWindow.jsx";
import { CodeHandler, Img, OuterLink, CopyToClipboard, } from "../views/Docs.jsx";
import { useStyles, } from "../components/ParsedAction.jsx";
import { sortByKey } from "../views/AngularWorkflow.jsx";

import { v4 as uuidv4 } from "uuid";
import aa from "search-insights";


// AppTypes:
// 0 = OpenAPI (VALID)
// 1 = Normal app (Python)
// 2 = OpenAPI (Invalid)
const searchClient = algoliasearch(
  "JNSS5CFDZZ",
  "c8f882473ff42d41158430be09ec2b4e"
)

const AppExplorer = (props) => {
  const {
    globalUrl,
    userdata,
    setUserData,
    checkLogin,
    isLoaded,
    selectedApp,
    serverside,
    isMobile,
    isLoggedIn,
    selectedDoc,
    secondApp,
  } = props;

  //const alert = useAlert();
  const classes = useStyles()
  let navigate = useNavigate()

  const { leftSideBarOpenByClick, themeMode, supportEmail } = useContext(Context);
  const theme = getTheme(themeMode);

  const surfaceColor = "#27292D";
const inputColor = theme.palette.textFieldStyle.backgroundColor;

const chipStyle = {
  marginTop: 5,
  backgroundColor: theme.palette.chipStyle.backgroundColor,
  height: 30,
  marginRight: 5,
  paddingLeft: 5,
  paddingRight: 5,
  cursor: "pointer",
  borderColor: theme.palette.chipStyle.borderColor,
  color: theme.palette.chipStyle.color,
};

const actionListStyle = {
  paddingLeft: 10,
  paddingRight: 10,
  paddingTop: 10,
  marginTop: 5,
  backgroundColor: inputColor,
  display: "flex",
  color: theme.palette.text.primary,
  maxWidth: 350,
  minWidth: 350,
  maxHeight: 54,
  overflow: "hidden",
};

const boxStyle = {
  color: theme.palette.text.primary,
  flex: "3",
  margin: 10,
  paddingLeft: 30,
  paddingRight: 30,
  paddingBottom: 30,
  paddingTop: 30,
  display: "flex",
  flexDirection: "column",
  position: "relative",
  maxHeight: 180,
  overflow: "hidden",
};

const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)";

  const params = useParams();
  //var props = JSON.parse(JSON.stringify(defaultprops))
  //props.match = {}
  //params = params

  const bodyDivStyle = {
    margin: "auto",
    maxWidth: isMobile ? "100%" : 1350,
    scrollX: "hidden",
    overflowX: "hidden",
  };

  var upload = "";
  const actionNonBodyRequest = ["GET", "HEAD", "DELETE", "CONNECT"];
  const authenticationOptions = [
    "No authentication",
    "API key",
    "Bearer auth",
    "Basic auth",
  ];
  const apikeySelection = ["Header", "Query"];

  const [app, setApp] = useState({});

  const [openapi, setOpenapi] = useState({});
  const [name, setName] = useState("");
  const [appId, setAppId] = useState("");
  const [contact, setContact] = useState("");
  const [file] = useState("");
  const [fileBase64, setFileBase64] = useState("");
  const [isAppLoaded, setIsAppLoaded] = useState(false);
  const [, setDescription] = useState("");
  const [, setBaseUrl] = useState("");
  const [, setAuthenticationRequired] = useState(false);
  const [, setAuthenticationOption] = useState(authenticationOptions[0]);
  const [newWorkflowTags, setNewWorkflowTags] = React.useState([]);
  const [, setParameterName] = useState("");
  const [, setParameterLocation] = useState(
    apikeySelection.length > 0 ? apikeySelection[0] : ""
  );
  const [, setUrlPath] = useState("");
  const [urlPathQueries, setUrlPathQueries] = useState([]);
  const [, setBasedata] = React.useState({});
  const [actions, setActions] = useState([]);
  const [errorCode] = useState("");
  const [reloadUrl, setReloadUrl] = React.useState(
    serverside === true ? "" : window.location.href
  );
  const [relatedWorkflows, setRelatedWorkflows] = useState(0);
  const [relatedApps, setRelatedApps] = useState(0);
  const [appAuthentication, setAppAuthentication] = React.useState([]);
  const [authLoaded, setAuthLoaded] = useState(false);
  const baseResult = "The execution result will show up here";
  const [anchorElAvatar, setAnchorElAvatar] = React.useState(null);
  const [executionResult, setExecutionResult] = useState({
    valid: false,
    result: baseResult,
  });
  const [executing, setExecuting] = useState(false);
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [creatorProfile, setCreatorProfile] = React.useState({});
  const [selectedTab, setSelectedTab] = React.useState(0);
  const defaultDocs = `\n\n## No Shuffle-specific app documentation is available yet.\n\n## Need more information about the app? [Contact us](/contact) and [Join the Community](https://discord.gg/B2CBzUm) and find others using this app.`
  const [sharingConfiguration, setSharingConfiguration] = React.useState("you");
  const [appdata, setAppData] = React.useState({});
  const [appDocumentation, setAppDocumentation] = useState(defaultDocs)
  const [secondaryApp, setSecondaryApp] = useState({});
  const [firstRequest, setFirstRequest] = useState(true);
  const [publishModalOpen, setPublishModalOpen] = React.useState(false);

  const [categories, setCategories] = useState(appCategories)
  const [newWorkflowCategories, setNewWorkflowCategories] = React.useState([]);
  const [update, setUpdate] = useState("");
  const [triggers, setTriggers] = useState([])
  const [selectedOrganization, setSelectedOrganization] = React.useState(undefined)
  const [selectedValidationAction, setSelectedValidationAction] = React.useState({})

  const [selectedMeta, setSelectedMeta] = React.useState({
    link: "https://github.com/Shuffle/openapi-apps/new/master/docs",
    read_time: 1,
  })

  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");


  // FIXME: This is used, as useEffect() creates an issue with apps not loading at all
  var to_be_copied = "";

  // 0 = VALID OpenAPI, 1 = Python, 2 = INVALID OpenAPI
  const [appType, setAppType] = React.useState(0);

  function handleClick(event) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }


  const loadOrganization = (orgId) => {
	fetch(`${globalUrl}/api/v1/orgs/${orgId}`, {
      method: "GET",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (response.status === 401) {
        } else {
		}

        return response.json();
      })
      .then((responseJson) => {
		  if (responseJson.success === false) {

		  } else {
		  	setSelectedOrganization(responseJson)
		  }
	  })
	  .catch((error) => {
		  console.log("Error in fetching organization: ", error)
	  })
  }


 useEffect(() => {
    if (selectedApp !== undefined && selectedApp !== null && Object.getOwnPropertyNames(selectedApp).length > 0) {
      //console.log("Firstrequest!!!")
    } else {
      if (serverside) {
        console.log("Not getting app because serverside.");
      } else {
        if (params.appid.length === 32 || params.appid.length === 36) {
          handleEditApp(params.appid);
          runAlgoliaAppSearch(params.appid, false, true);
        } else {
          runAlgoliaAppSearch(params.appid);

          //handleEditApp()
        }
      }
      //parseIncomingOpenapiData(YAML.parse(data))
    }

    if (serverside !== true) {
      const urlSearchParams = new URLSearchParams(window.location.search);
      const queries = Object.fromEntries(urlSearchParams.entries());
      const foundTab = queries["tab"];
      console.log("PROPS: ", queries);

      if (params.integrationid !== undefined) {
        console.log(
          "Should search for connection integration with ",
          params.integrationid
        );
        setSelectedTab(3);

        runAlgoliaAppSearch(params.integrationid, false);
      } else if (foundTab !== null && foundTab !== undefined) {
        if (foundTab === "stats") {
          setSelectedTab(2);
        } else if (foundTab === "run") {
          setSelectedTab(1);
        } else if (foundTab === "docs" || foundTab === "documentation") {
          setSelectedTab(0);
        }
      } else {
        //setSelectedTab(1);
      }

    }
  }, []);

  if (serverside === false && firstRequest && isLoggedIn === true && selectedOrganization === undefined && userdata !== undefined && userdata.active_org !== undefined && userdata.active_org !== null && userdata.active_org.id !== undefined && userdata.active_org.id !== null) {
  	  loadOrganization(userdata.active_org.id) 
  }

  var activateButton = (
    <Link to={`/apps/new?id=${appId}`} style={{ textDecoration: "none" }}>
      <Button
        variant="contained"
        component="label"
        color="primary"
        onClick={() => {
          ReactGA.event({
            category: "Appexplorer",
            action: "app_build",
            label: params.appid,
          });
          toast("INTERESTED!");
        }}
        style={{
          padding: 15,
          marginTop: 15,
          borderRadius: 25,
          height: 50,
          margin: "15px 0px 15px 0px",
          fontSize: 14,
          color: "white",
          backgroundImage: buttonBackground,
          width: "200px",
        }}
      >
        I'm interested
      </Button>
    </Link>
    );

  const Heading = (props) => {
    const element = React.createElement(`h${props.level}`,{ style: { marginTop: props.level === 1 ? 20 : 50 } },props.children);
    
    const [hover, setHover] = useState(false);

    var extraInfo = "";
    if (props.level === 1) {
      extraInfo = (
        <div
          style={{
            backgroundColor: theme.palette.textFieldStyle.backgroundColor,
            padding: 15,
            borderRadius: theme.palette?.textFieldStyle.borderRadius,
            marginBottom: 30,
            display: "flex",
          }}
        >
          <div
            style={{
              flex: 3,
              display: "flex",
              vAlign: "center",
              position: "sticky",
              top: 50,
            }}
          >
            {isMobile === true ? null : (
              <Typography style={{ display: "inline", marginTop: 6 }}>
                <a
                  rel="noopener noreferrer"
                  target="_blank"
                  href={selectedMeta.link}
                  style={{ textDecoration: "none", color: "#f85a3e" }}
				  onClick={() => {
					ReactGA.event({
						category: "Appexplorer",
						action: "github_docs_edit_click",
						label: params.appid,
					});
				  }}
                >
                  <Button style={{}} variant="outlined">
                    <EditIcon /> &nbsp;&nbsp;Edit
                  </Button>
                </a>
              </Typography>
            )}
            {isMobile === true ? null : (
              <div
                style={{
                  height: "100%",
                  width: 1,
                  backgroundColor: "white",
                  marginLeft: 50,
                  marginRight: 50,
                }}
              />
            )}
            <Typography style={{ display: "inline", marginTop: 11 }}>
              {selectedMeta.read_time} minute
              {selectedMeta.read_time === 1 ? "" : "s"} to read
            </Typography>
          </div>

          <div style={{ flex: 2 }}>
            {isMobile === true ||
            selectedMeta.contributors === undefined ||
            selectedMeta.contributors === null ? (
              ""
            ) : (
              <div style={{ margin: 10, height: "100%", display: "inline" }}>
                {selectedMeta.contributors.slice(0, 7).map((data, index) => {
                  return (
                    <a
                      key={index}
                      rel="noopener noreferrer"
                      target="_blank"
                      href={data.url}
                      target="_blank"
                      style={{ textDecoration: "none", color: "#f85a3e" }}
                    >
                      <Tooltip title={data.url} placement="bottom">
                        <img
                          alt={data.url}
                          src={data.image}
                          style={{
                            marginTop: 5,
                            marginRight: 10,
                            height: 40,
                            borderRadius: 40,
                          }}
                        />
                      </Tooltip>
                    </a>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      );
    }

		// Still inside Heading
		
		// Find appCategory in appCategories
		const appCategory = newWorkflowCategories.length === 0 ? "" : (newWorkflowCategories[0]).toLowerCase();
		const foundCategory = appCategories.find((category) => {
			if (category.name.toLowerCase() === appCategory) {
				return category
			}
		})
		const bgColor = foundCategory === undefined ? "" : foundCategory.color

		const getAllLabels = () => {
			const actionLabels = actions.filter((input_action) => {
				return input_action.action_label !== undefined && input_action.action_label !== null && input_action.action_label !== "No Label"
			})

			var labels = []
			actionLabels.forEach((action) => {
				labels.push(action.action_label)
			})

			return labels
		}

		const allLabels = getAllLabels()

		const findRelevantAction = (action_label) => {
			const foundAction = actions.find((input_action) => {
				if (input_action.action_label.toLowerCase() === action_label.toLowerCase()) {
					return input_action
				}
			})

			if (foundAction !== undefined) {
				setCurrentAction(foundAction)
				setCurrentActionMethod(foundAction.method);
				setSelectedTab(1);
			} else {
				console.log("Could not find action with label: ", action_label)
			}
		}

		// Parses out extra category info and such for the app
		const extraAppInfo = props.level === 1 ? 
			<div style={{marginBottom: 15, }}>
				{/*
				<div style={{display: "flex" }}>
					<Typography style={{width: 100, }}>
						Category: 
					</Typography>
					<Chip
						style={{
							backgroundColor: bgColor,
							color: "white",
							borderRadius: 5,
							minWidth: 80,
							marginRight: 10,
							marginTop: 2,
							cursor: "pointer",
							fontSize: 14,
						}}
						label={appCategory}
					/>
				</div>
				*/}
				{triggers.length === 0 ? null :
					<div style={{display: "flex", marginTop: 10,  }}>
						{triggers.map((trigger, index) => {

							return (
								<Chip
									key={index}
									onClick={() => {
										console.log("Clicked: ", trigger.name)
									}}
									style={{
										cursor: "pointer", 
                    backgroundColor: theme.palette.chipStyle.backgroundColor,
                    borderColor: theme.palette.chipStyle.borderColor,
										color: theme.palette.chipStyle.color,
										borderRadius: 40,
										minWidth: 80,
										marginRight: 10,
										marginTop: 2,
										fontSize: 14,
									}}
									avatar={<Avatar alt={trigger.name} src={trigger.large_image} />}
									label={trigger.name}
								/>
							)
						})}
					</div>
				}

				{serverside === false && foundCategory !== undefined && foundCategory !== null && foundCategory.action_labels.length > 0 ?
					<div style={{display: "flex", marginTop: 10,  }}>
						{foundCategory.action_labels.slice(0,5).map((action_label, index) => {
							const included = allLabels.includes(action_label)
              const iconInfo = GetIconInfo({ name: action_label });
              const useIcon = iconInfo.originalIcon;

							return (
								<Chip
									key={index}
									onClick={() => {
										findRelevantAction(action_label)
									}}
									disabled={included === false}
									style={{
										cursor: included ? "pointer" : "default",
										color: theme.palette.chipStyle.color,
                    borderColor: theme.palette.chipStyle.borderColor,
                    backgroundColor: theme.palette.chipStyle.backgroundColor,
										borderRadius: 40,
										minWidth: 80,
										marginRight: 10,
										marginTop: 2,
										fontSize: 14,
										textDecoration: included ? "none" : "line-through",
									}}
									avatar={useIcon}
									label={action_label}
								/>
							)
						})}
					</div>
				: null}
			</div>
			: null

    return (
      <Typography
        onMouseOver={() => {
          setHover(true);
        }}
      >
        {props.level !== 1 ? (
          <Divider
            style={{
              width: "90%",
              marginTop: 40,
              backgroundColor: theme.palette.inputColor,
            }}
          />
        ) : null}
        {element}
		{extraAppInfo}
        {extraInfo}
      </Typography>
    );
  };

  const [, setCurrentActionMethod] = useState(actionNonBodyRequest[0]);

  // Selectedaction = Shuffle style action
  // Currentaction = OpenAPI style
  const [selectedAction, setSelectedAction] = useState({});
  const [currentAction, setCurrentAction] = useState({
    name: "",
    description: "",
    url: "",
    headers: "",
    paths: [],
    queries: [],
    body: "",
    errors: [],
    method: actionNonBodyRequest[0],
  });

  if (params.appid === "new") {
    return null;
  }

  const WorkflowHits = ({ hits }) => {
    //console.log("WORKFLOWS: ", hits)

    setRelatedWorkflows(hits.length);
    return hits.length;
  };

  const AppHits = ({ hits }) => {
    if (hits.length >= 1) {
      setRelatedApps(hits.length - 1);

      return hits.length - 1;
    } else {
      setRelatedApps(0);
      return 0;
    }
  };

  const getUserProfile = (username) => {
    if (serverside === true) {
      return;
    }

    fetch(`${globalUrl}/api/v1/users/creators/${username}`, {
      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 !== false) {
          setCreatorProfile(responseJson);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const SearchBox = ({ currentRefinement, refine, isSearchStalled }) => {
    return null;
  };

  const CustomWorkflowHits = connectHits(WorkflowHits);
  const CustomAppHits = connectHits(AppHits);
  const CustomSearchBox = connectSearchBox(SearchBox);

  const HandleJsonCopy = (base, copy, base_node_name) => {
    console.log("COPY: ", copy);
    var newitem = JSON.parse(base);
    to_be_copied = "$" + base_node_name;
    for (var key in copy.namespace) {
      if (copy.namespace[key].includes("Results for")) {
        continue;
      }

      if (newitem !== undefined && newitem !== null) {
        newitem = newitem[copy.namespace[key]];
        if (!isNaN(copy.namespace[key])) {
          to_be_copied += ".#";
        } else {
          to_be_copied += "." + copy.namespace[key];
        }
      }
    }
  };

  const handleReactJsonClipboard = (copy) => {
    console.log("COPY: ", copy);

    const elementName = "copy_element_shuffle";
    var copyText = document.getElementById(elementName);
    if (copyText !== null && copyText !== undefined) {
      navigator.clipboard.writeText(JSON.stringify(copy));
      copyText.select();
      copyText.setSelectionRange(0, 99999); /* For mobile devices */

      /* Copy the text inside the text field */
      document.execCommand("copy");
      toast("Copied data");
    }
  };

  const activateApp = (action) => {
    if (serverside === true) {
      return
    }

	const appExists = userdata.active_apps !== undefined && userdata.active_apps !== null && userdata.active_apps.includes(appId)
	var url = appExists ? `${globalUrl}/api/v1/apps/${appId}/deactivate` : `${globalUrl}/api/v1/apps/${appId}/activate`
	if (action !== undefined && action !== null) {
		url = `${globalUrl}/api/v1/apps/${appId}/${action}`
	}
	fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Failed to activate");
        }

        return response.json();
      })
      .then((responseJson) => {
        if (responseJson.success === false) {
			if (action === undefined || action === null) {
				if (responseJson.reason !== undefined) {
					toast("Failed to activate the app: "+responseJson.reason);
				} else {
					toast("Failed to activate the app");
				}
			} else {
				if (responseJson.reason !== undefined) {
					toast("Failed to perform action: "+responseJson.reason);
				} else {
					toast(`Failed to perform action. Please try again or contact ${supportEmail}`);
				}
			}
      } else {
          if (checkLogin !== undefined && checkLogin !== null) {
            checkLogin()
          }

		  if (action === undefined || action === null) {
			  if (appExists) {
				toast("App deactivated for your organization! Existing workflows with the app will continue to work.")
			  } else {
				toast("App activated for your organization!")
			  }
		  } else {
		  }
        }
      })
      .catch((error) => {
        toast(error.toString());
      });
  };

  const handleEditApp = (appid) => {
    if (serverside === true) {
      return;
    }

		setAppId(appid)

    fetch(globalUrl + "/api/v1/apps/" + appid + "/config", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          //console.log("App doesn't exist or isn't available to you.")
          //toast("Something went wrong - this app is not available to you. Redirecting you back to search.")
          ReactGA.event({
            category: "appexplorer",
            action: `app_not_found`,
            label: appid,
          });
        } else {
          ReactGA.event({
            category: "appexplorer",
            action: `app_found`,
            label: appid,
          });
        }

        return response.json();
      })
      .then((responseJson) => {
        if (
          responseJson.success === false ||
          responseJson.success === undefined
        ) {
          toast("Failed to get the app")
          setIsAppLoaded(true)
          setTimeout(() => {
          	navigate("/search")
          }, 1000);
          return;
        } else {
          parseIncomingOpenapiData(responseJson);
        }
      })
      .catch((error) => {
        toast("Error in app fetch: " + error.toString());
      });
  };

  const parseIncomingAppdata = (data, openapiExists) => {
    document.title = data.name + " App - OpenAPI and API";

	

    setExecutionResult({
      valid: false,
      result: baseResult,
    });

    setName((data.name.charAt(0).toUpperCase() + data.name.substring(1)).replaceAll("_"," "));
    
    setDescription(data.description);
    setFileBase64(data.large_image);
    setContact(data.contact_info);

	if (data.categories !== undefined && data.categories !== null) {
		setNewWorkflowCategories(data.categories);
	}
    setAppType(1);

    if (data.owner !== undefined && data.owner !== null) {
      getUserProfile(data.owner);
      //console.log("DATA: ", data)
    }

    setAppData(data)
	if (data.reference_info.triggers !== undefined && data.reference_info.triggers !== null && data.reference_info.triggers.length > 0) {
		var parsedtriggers = []
		for (var key in data.reference_info.triggers) {
			const curtrigger = data.reference_info.triggers[key]

			const foundTrigger = workflowTriggers.find((trigger) => trigger.name.toLowerCase() === curtrigger.toLowerCase())
			if (foundTrigger !== undefined && foundTrigger !== null) {
				parsedtriggers.push(foundTrigger)
			}
		}

		setTriggers(parsedtriggers)
	}

    var newactions = [];
    if (!openapiExists) {
      console.log("Skipping openapi");
      for (var key in data.actions) {
        const action = data.actions[key];
        newactions.push({
          name: action.name,
          description: action.description,
          url: "",
          headers: "",
          paths: [],
          queries: [],
          body: "",
          errors: [],
          method: "CUSTOM",
        });
      }
    }


    if (newactions.length > 0) {
      setCurrentAction(newactions[0]);

      if (data.actions !== undefined) {
        //var methodName = `${data.method}_${data.name}`.toLowerCase()
        //if (data.name.toLowerCase().startsWith(data.method.toLowerCase())) {
        //	methodName = data.name.toLowerCase()
        //}
        //var newselectedaction = data.actions.find(item => item.name.toLowerCase() === methodName)
        //if (newselectedaction === undefined || newselectedaction === null) {
        //	toast(`Name ${methodName} not found. Please contact us.`)
        //	return
        //}

        //var newselectedaction = data.actions.find(item => item.name.toLowerCase() === )
        const newselectedaction = data.actions[0];
        newselectedaction.app_id = data.id;
        newselectedaction.app_name = data.name;
        newselectedaction.app_version = data.app_version;

        newselectedaction.authentication = selectedAction.authentication;

        newselectedaction.authentication_id = selectedAction.authentication_id;
        newselectedaction.selectedAuthentication = selectedAction.selectedAuthentication;
          
        if (
          data.authentication.required &&
          newselectedaction.authentication_id !== undefined &&
          newselectedaction.authentication_id !== null &&
          newselectedaction.authentication_id.length === 0
        ) {
          const tmpParams = selectedAction.parameters;
          selectedAction.parameters = [];

          for (let paramkey in data.authentication.parameters) {
            var item = data.authentication.parameters[paramkey];
						console.log("PARAM1: ", item)
            item.configuration = true;

            const found = selectedAction.parameters.find((param) => param.name === item.name);
            
            if (found === null || found === undefined) {
              selectedAction.parameters.push(item);
            }
          }

          for (let paramkey in tmpParams) {
            var item = tmpParams[paramkey];
						console.log("PARAM2: ", item)
            //item.configuration = true
            const found = selectedAction.parameters.find((param) => param.name === item.name);
            
            if (found === null || found === undefined) {
              selectedAction.parameters.push(item);
            }
          }
        }

        setSelectedAction(newselectedaction);
      }


		const firstActions = newactions.filter(data => data.action_label !== undefined && data.action_label !== null && data.action_label !== "No Label")
		//console.log("First actions: ", firstActions)
		const secondActions = newactions.filter(data => data.action_label === undefined || data.action_label === null || data.action_label === "No Label")
		const newActions = firstActions.concat(secondActions)
      setActions(newActions);
    }

    setIsAppLoaded(true);
  };

  // Sets the data up as it should be at later points
  // This is the data FROM the database, not what's being saved
  const parseIncomingOpenapiData = (data) => {
    var appexists = false;
    var nameExists = false;
    var parsedapp = {};
    if (data.app !== undefined && data.app !== null) {
      // Should basically always be true if openapi exists too
	  var parsedBaseapp = ""
	  try { 
	  	parsedBaseapp = base64_decode(data.app)
	  } catch (e) {
	  	console.log("Failed JSON parsing: ", e)
	  	parsedBaseapp = data
	  }

	  parsedapp = JSON.parse(parsedBaseapp)
	  parsedapp.name = parsedapp.name.replaceAll("_", " ");

	  setAppDocumentation("# "+parsedapp.name+defaultDocs);
	  setApp(parsedapp);
    setSharingConfiguration(parsedapp.sharing === true ? "public" : "you")

      appexists =
        parsedapp.name !== undefined &&
        parsedapp.name !== null &&
        parsedapp.name.length !== 0;

      if (appexists) {
        getAppDocs(parsedapp.name, "python", parsedapp.app_version);
      }

      if (data.openapi === undefined || data.openapi === null) {
		console.log("Parsed app: ", parsedapp)
        parseIncomingAppdata(parsedapp, false);
      } else {
        parseIncomingAppdata(parsedapp, true);
      }
    }

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

		var parsedDecoded = ""
		try { 
			parsedDecoded = base64_decode(data.openapi)
    } catch (e) {
			console.log("Failed JSON parsing: ", e)
			parsedDecoded = data
		}

    setAppType(0);
    parsedapp = JSON.parse(parsedDecoded);
    data = parsedapp.body === undefined ? parsedapp : JSON.parse(parsedapp.body);
    setOpenapi(data);

    getAppDocs(data.info.title, "openapi", data.app_version);

    setBasedata(data);
    if (!appexists) {
      setName(
        (
          data.info.title.charAt(0).toUpperCase() + data.info.title.substring(1)
        ).replaceAll("_", " ")
      );
      setDescription(data.info.description);

      console.log("Found name: ", data.info.title);
    }

    if (serverside !== true) {
			var doctitle = "Shuffle App for " + data.info.title 
			if (!data.info.title.toLowerCase().includes("api")) {
				doctitle += " API"
			}

      document.title = doctitle
    }

    if (data.info !== null && data.info !== undefined) {
      if (data.info["x-logo"] !== undefined) {
        setFileBase64(data.info["x-logo"]);
      }

      if (data.info.contact !== undefined) {
        setContact(data.info.contact);
      }

      if (data.info["x-categories"] !== undefined && data.info["x-categories"].length > 0) {
        setNewWorkflowCategories(data.info["x-categories"]);
      }
    }

    if (data.tags !== undefined && data.tags.length > 0) {
      for (var key in data.tags) {
        newWorkflowTags.push(data.tags[key].name);
      }

      setNewWorkflowTags(newWorkflowTags);
    }

    var securitySchemes = data?.components?.securityDefinitions;
    if (securitySchemes === undefined) {
      securitySchemes = data?.securitySchemes;
    }

    if (securitySchemes === undefined) {
      securitySchemes = data?.components?.securitySchemes;
    }

    const allowedfunctions = [
      "GET",
      "CONNECT",
      "HEAD",
      "DELETE",
      "POST",
      "PATCH",
      "PUT",
    ];

    // FIXME - headers?
    var newActions = [];
    var wordlist = {};
    if (data.paths !== null && data.paths !== undefined) {
      for (let [path, pathvalue] of Object.entries(data.paths)) {
        if (path === "tmp0") {
          setAppType(2);
        }

        for (let [method, methodvalue] of Object.entries(pathvalue)) {
          if (methodvalue === null) {
            toast("Skipped method " + method);
            continue;
          }

          if (!allowedfunctions.includes(method.toUpperCase())) {
            continue;
          }

          var tmpname = methodvalue.summary;
          if (
            methodvalue.operationId !== undefined &&
            methodvalue.operationId !== null &&
            methodvalue.operationId.length > 0
          ) {
            tmpname = methodvalue.operationId;
          }

          var newaction = {
            name: tmpname,
            description: methodvalue.description,
            url: path,
            method: method.toUpperCase(),
            headers: "",
            queries: [],
            paths: [],
            body: "",
            errors: [],
            example_response: "",
			action_label: "No Label",
			required_bodyfields: [],
          }

			// Related to Label Management
			if (methodvalue["x-label"] !== undefined && methodvalue["x-label"] !== null) {
				// Check if there are commas in it then loop and find the correct one
				// Should ignore 'No Label' and 'No label'
				var correctlabel = "" 
				const labels = methodvalue["x-label"].split(",")
				for (let labelkey in labels) {
					var label = labels[labelkey].trim()
					if (label.toLowerCase() === "no label") {
						continue
					}

					// Remove quotes and escapes
					label = label.replace(/['"]+/g, '')
					label = label.replace(/\\/g, '')

					//label = label.replace("_", " ", -1)
					//label = label.charAt(0).toUpperCase() + label.slice(1)

					correctlabel = label
					break
				}

				// FIX: Map labels only if they're actually in the category list
				newaction.action_label = correctlabel
			}

			if (methodvalue["x-required-fields"] !== undefined && methodvalue["x-required-fields"] !== null) {
				newaction.required_bodyfields = methodvalue["x-required-fields"]
			}

          for (key in methodvalue.parameters) {
            const parameter = methodvalue.parameters[key];
            if (parameter.in === "query") {
              var tmpaction = {
                description: parameter.description,
                name: parameter.name,
                required: parameter.required,
                in: "query",
              };

              if (parameter.required === undefined) {
                tmpaction.required = false;
              }

              newaction.queries.push(tmpaction);
            } else if (parameter.in === "path") {
              // FIXME - parse this to the URL too
              newaction.paths.push(parameter.name);

              // FIXME: This doesn't follow OpenAPI3 exactly.
              // https://swagger.io/docs/specification/describing-request-body/
              // https://swagger.io/docs/specification/describing-parameters/
              // Need to split the data.
            } else if (parameter.in === "body") {
              // FIXME: Add tracking for components
              // E.G: https://raw.githubusercontent.com/owentl/Shuffle/master/gosecure.yaml
              if (parameter.example !== undefined) {
                newaction.body = parameter.example;
              }
            } else if (parameter.in === "header") {
              newaction.headers += `${parameter.name}=${parameter.example}\n`;
            }
          }

          if (newaction.name === "" || newaction.name === undefined) {
            // Find a unique part of the string
            // FIXME: Looks for length between /, find the one where they differ
            // Should find others with the same START to their path
            // Make a list of reserved names? Aka things that show up only once
            if (Object.getOwnPropertyNames(wordlist).length === 0) {
              for (let [newpath] of Object.entries(data.paths)) {
                const newpathsplit = newpath.split("/");
                for (key in newpathsplit) {
                  const pathitem = newpathsplit[key].toLowerCase();
                  if (wordlist[pathitem] === undefined) {
                    wordlist[pathitem] = 1;
                  } else {
                    wordlist[pathitem] += 1;
                  }
                }
              }
            }

            //console.log("WORDLIST: ", wordlist)

            // Remove underscores and make it normal with upper case etc
            const urlsplit = path.split("/");
            if (urlsplit.length > 0) {
              var curname = "";
              for (key in urlsplit) {
                var subpath = urlsplit[key];
                if (wordlist[subpath] > 2 || subpath.length < 1) {
                  continue;
                }

                curname = subpath;
                break;
              }

              // FIXME: If name exists,
              // FIXME: Check if first part of parsedname is verb, otherwise use method
              const parsedname = curname
                .split("_")
                .join(" ")
                .split("-")
                .join(" ")
                .split("{")
                .join(" ")
                .split("}")
                .join(" ")
                .trim();
              if (parsedname.length === 0) {
                newaction.errors.push("Missing name");
              } else {
                const newname =
                  method.charAt(0).toUpperCase() +
                  method.slice(1) +
                  " " +
                  parsedname;
                const searchactions = newActions.find(
                  (data) => data.name === newname
                );
                //console.log("SEARCH: ", searchactions);
                if (searchactions !== undefined) {
                  newaction.errors.push("Missing name");
                } else {
                  newaction.name = newname;
                }
              }
            } else {
              newaction.errors.push("Missing name");
            }
          }
          newActions.push(newaction);
        }

        if (data.servers !== undefined && data.servers.length > 0) {
          var firstUrl = data.servers[0].url;
          if (
            firstUrl.includes("{") &&
            firstUrl.includes("}") &&
            data.servers[0].variables !== undefined
          ) {
            const regex = /{\w+}/g;
            const found = firstUrl.match(regex);
            if (found !== null) {
              for (key in found) {
                const item = found[key].slice(1, found[key].length - 1);
                const foundVar = data.servers[0].variables[item];
                if (foundVar["default"] !== undefined) {
                  firstUrl = firstUrl.replaceAll(
                    found[key],
                    foundVar["default"]
                  );
                }
              }
            }
          }

          if (firstUrl.endsWith("/")) {
            setBaseUrl(firstUrl.slice(0, firstUrl.length - 1));
          } else {
            setBaseUrl(firstUrl);
          }
        }
      }
    }

    // FIXME: Have multiple authentication options?
    if (securitySchemes !== undefined) {
      for (const [, value] of Object.entries(securitySchemes)) {
        if (value.scheme === "bearer") {
          setAuthenticationOption("Bearer auth");
          setAuthenticationRequired(true);
          break;
        } else if (value.type === "apiKey") {
          setAuthenticationOption("API key");

          value.in = value.in.charAt(0).toUpperCase() + value.in.slice(1);
          setParameterLocation(value.in);
          if (!apikeySelection.includes(value.in)) {
            //console.log("APIKEY SELECT: ", apikeySelection)
            toast("Might be error in setting up API key authentication");
          }

          //console.log("PARAM NAME: ", value.name)
          setParameterName(value.name);
          setAuthenticationRequired(true);
          break;
        } else if (value.scheme === "basic") {
          setAuthenticationOption("Basic auth");
          setAuthenticationRequired(true);
          break;
        }
      }
    }

		const firstActions = newActions.filter(data => data.action_label !== undefined && data.action_label !== null && data.action_label !== "No Label")
		//console.log("First actions: ", firstActions)
		const secondActions = newActions.filter(data => data.action_label === undefined || data.action_label === null || data.action_label === "No Label")
		newActions = firstActions.concat(secondActions)
    setActions(newActions);
    setIsAppLoaded(true);

    if (newActions.length > 0) {
      setCurrentAction(newActions[0]);
      setCurrentActionMethod(newActions[0].method);
      setUrlPathQueries(newActions[0].queries);
      setUrlPath(newActions[0].url);
      //setActionsModalOpen(true)
    }
  };

  const getAppDocs = (appname, location, version) => {
    if (serverside === true) {
      return;
    }

    fetch(
      `${globalUrl}/api/v1/docs/${appname}?location=${location}&version=${version}`,
      {
        headers: {
          Accept: "application/json",
        },
        credentials: "include",
      }
    )
      .then((response) => {
        if (response.status === 200) {
          //toast("Successfully GOT app "+appId)
        } else {
          //toast("Failed getting app");
        }

        return response.json();
      })
      .then((responseJson) => {
				var setMeta = false
        if (responseJson.success === true) {
          if (responseJson.reason !== undefined && responseJson.reason !== undefined && responseJson.reason.length > 0) {
          
            if (!responseJson.reason.includes("404: Not Found") && responseJson.reason.length > 25) {
			  const imgRegex = /<img.*?src="(.*?)"/g;
			  const newdata = responseJson.reason.replace(imgRegex, '![]($1)');

              setAppDocumentation(newdata)

              const urlSearchParams = new URLSearchParams(
                window.location.search
              );
              const queries = Object.fromEntries(urlSearchParams.entries());
              const foundTab = queries["tab"];
              if (foundTab !== null && foundTab !== undefined) {

              } else {
                if (params.integrationid === undefined) {
                  setSelectedTab(0);
                }
              }

							if (responseJson.meta !== undefined) {
								setSelectedMeta(responseJson.meta);
								setMeta = true 
							} 
            }
          }
        } else {
        }

				if (!setMeta) {
					setSelectedMeta({
  					"name": appname,
  					"contributors": [],
  					"edited": "",
  					"read_time": 1,
						"link": `https://github.com/Shuffle/openapi-apps/new/master/docs?filename=${appname.toLowerCase().replaceAll(" ", "_").replaceAll("%20", "_")}.md`,
					})
				}
      })
      .catch((error) => {
        toast("Error in doc loading: " + error.toString());
      });
  };

  const runAlgoliaAppSearch = (appname, isOriginal, triggerOnly) => {
    const index = searchClient.initIndex("appsearch");

    console.log("Running appsearch for: ", appname);


    index
      .search(appname)
      .then(({ hits }) => {
        const appsearchname = appname.replaceAll("_", " ").toLowerCase();
		var found = false

		if (hits !== undefined && hits !== null && hits.length === 1) {
			found = true
			if (isOriginal !== false) {
				handleEditApp(hits[0].objectID)
			} else {
				setSecondaryApp(hits[0])
			}
		}

        for (var key in hits) {
          const hit = hits[key];

          if (hit["name"] === null || hit["name"] === undefined) {
            continue;
          }

          if (hit["name"].replaceAll("_", " ").toLowerCase().includes(appsearchname) || hit["objectID"] === appname) {
			  /*
			if (hit.triggers !== undefined && hit.triggers !== null && hit.triggers.length > 0) {
				var parsedtriggers = []
				for (var key in hit.triggers) {
					const curtrigger = hit.triggers[key].toLowerCase()

					const foundTrigger = workflowTriggers.find((trigger) => trigger.name.toLowerCase() === curtrigger)
					if (foundTrigger !== undefined && foundTrigger !== null) {
						parsedtriggers.push(foundTrigger)
					}
				}

				setTriggers(parsedtriggers)
			}
			*/

			if (triggerOnly === true) {

			} else {
				if (isOriginal !== false) {
					found = true
					handleEditApp(hit.objectID);
				} else {
					console.log("Found second app: ", hit);
					hit.name = hit.name.charAt(0).toUpperCase() + hit.name.slice(1);
					setSecondaryApp(hit);
				}
			}

            break;
          }
        }

	    if (!found) {
			if (hits.length > 0) {
				if (isOriginal !== false) {
					handleEditApp(hits[0].objectID)
				} else {
					setSecondaryApp(hits[0]);
				}

				return
			}

			//navigate("/search?message=App not found&q=" + appname + "&tab=apps")
			//toast("App not found. Please contact support@shuffler.io if you believe this is an error.")
			return
		}
      })
      .catch((err) => {
        console.log(err);
      });
  };


  

  if (serverside === true && firstRequest) {
    setFirstRequest(false);
    if (
      selectedApp !== undefined &&
      selectedApp !== null &&
      Object.getOwnPropertyNames(selectedApp).length > 0
    ) {
      parseIncomingOpenapiData(selectedApp);
    }

    if (
      selectedDoc !== undefined &&
      selectedDoc !== null &&
      Object.getOwnPropertyNames(selectedDoc).length > 0
    ) {
      setAppDocumentation(selectedDoc.reason);
      setSelectedTab(0);
    }

    if (
      secondApp !== undefined &&
      secondApp !== null &&
      Object.getOwnPropertyNames(secondApp).length > 0
    ) {
      setSelectedTab(3);
      setSecondaryApp(secondApp);
    }
  }

  //, [])

  if (serverside !== true && window.location.href !== reloadUrl) {
    setReloadUrl(window.location.href);
    setAppDocumentation(defaultDocs);
	setTriggers([])
    //handleEditApp(params.appid)

    if (params.appid.length === 32 || params.appid.length === 36) {
      handleEditApp(params.appid);
			runAlgoliaAppSearch(params.appid, false, true);
    } else {
      runAlgoliaAppSearch(params.appid);
    }
  }

  const loopQueries =
    urlPathQueries === undefined ||
    urlPathQueries === null ||
    urlPathQueries.length === 0 ? null : (
      <div>
        <Divider
          style={{
            marginBottom: "10px",
            marginTop: "30px",
            height: "1px",
            width: "100%",
            backgroundColor: "grey",
          }}
        />
        Queries
        {urlPathQueries.map((data, index) => {
          return (
            <Paper key={index} style={actionListStyle}>
              <div style={{ marginLeft: "5px", width: "100%" }}>
                <TextField
                  required
                  fullWidth={true}
                  defaultValue={data.name}
                  placeholder={"Query name"}
                  onBlur={(e) => {
                    //urlPathQueries[index].name = e.target.value
                    //setUrlPathQueries(urlPathQueries)
                  }}
                  InputProps={{
                    style: {
                      color: "white",
                    },
                  }}
                />
              </div>
            </Paper>
          );
        })}
        <Divider
          style={{
            marginBottom: "10px",
            marginTop: "30px",
            height: "1px",
            width: "100%",
            backgroundColor: "grey",
          }}
        />
      </div>
    );

  const executeSingleAction = (appid, thisaction) => {
    if (serverside === true) {
      return;
    }

	if (isCloud) {
		thisaction.environment = "Cloud"
	} else {
		thisaction.environment = "Shuffle"
	}

    setExecutionResult({
      valid: false,
      result: baseResult,
    });

    setExecuting(true);

    fetch(globalUrl + "/api/v1/apps/" + appid + "/run", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(thisaction),
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200 for stream results :O!");
        }

        return response.json();
      })
      .then((responseJson) => {
        //console.log("RESPONSE: ", responseJson)
        if (
          responseJson.success === true &&
          responseJson.result !== null &&
          responseJson.result !== undefined &&
          responseJson.result.length > 0
        ) {
          const result = responseJson.result.slice(0, 50) + "...";
          //toast("SUCCESS: "+result)

          const validate = validateJson(responseJson.result);
          setExecutionResult(validate);
        } else if (
          responseJson.success === false &&
          responseJson.reason !== undefined &&
          responseJson.reason !== null
        ) {
          toast(responseJson.reason);
          setExecutionResult({ valid: false, result: responseJson.reason });
        } else if (responseJson.success === true) {
          setExecutionResult({
            valid: false,
            result:
              "Couldn't finish execution. Please fill all the required fields, and retry the execution.",
          });
        } else {
          setExecutionResult({
            valid: false,
            result:
              "Couldn't finish execution OR no result was returned (2). Please fill all the required fields, and validate the execution.",
          });
        }

        setExecuting(false);
      })
      .catch((error) => {
        toast("Execution error: " + error.toString());
        setExecuting(false);
      });
  };

  const MethodWrapper = (props) => {
    const { data } = props;

    var bgColor = "#61afee";
    if (data.method === "POST") {
      bgColor = "#49cc90";
    } else if (data.method === "PUT") {
      bgColor = "#fca130";
    } else if (data.method === "PATCH") {
      bgColor = "#50e3c2";
    } else if (data.method === "DELETE") {
      bgColor = "#f93e3e";
    } else if (data.method === "HEAD") {
      bgColor = "#9012fe";
    }

    return (
      <Chip
        style={{
          backgroundColor: bgColor,
          color: "white",
          borderRadius: theme.palette?.borderRadius,
          minWidth: 80,
          marginRight: 10,
          marginTop: 2,
          cursor: "pointer",
          fontSize: 14,
        }}
        label={data.method}
      />
    );
  };

  const parseName = (name, length) => {
		if (name === undefined || name === null) {
			return ""
		}

    var parsedName = name.charAt(0).toUpperCase() + name.slice(1);
    parsedName = parsedName.replaceAll("_", " ");
    if (
      length !== undefined &&
      length !== null &&
      length > 3 &&
      length < parsedName.length
    ) {
      parsedName = parsedName.slice(0, length) + "..";
    }

    return parsedName;
  };

	const SubAction = (props) => {
		const { data, selected, hovered, index } = props;

    const [hoveredItem, setHoveredItem] = useState(true);

		var urlPath = data.url !== undefined && data.url !== null && data.url.length > 0 ? data.url : ""
		var wrappedStyle = JSON.parse(JSON.stringify(actionListStyle));
		wrappedStyle.backgroundColor = selected || hovered ? theme.palette.platformColor : theme.palette.inputColor;
		wrappedStyle.paddingBottom = urlPath.length > 0 ? 0 : 10
		wrappedStyle.border = selected || hovered ? "1px solid rgba(255,255,255,0.3)" : ""

		var methodName = `${data.method}_${data.name}`;
		if ((data.name !== undefined && data.name !== null && data.method !== undefined && data.method !== null ) && (data.method.toLowerCase() === "custom" || data.name.toLowerCase().startsWith(data.method.toLowerCase()))) {
			methodName = data.name;
		}

		const invalid_keys = [".", "(", ")", "'", ",", "[", "]"];
		methodName = methodName.toLowerCase().replaceAll(" ", "_").replaceAll("-", "_");

		for (var key in invalid_keys) {
			methodName = methodName.replaceAll(invalid_keys[key], "");
		}

		const parsedName = parseName(data.name, 35);
		if (parsedName.length === 0) {
			return null
		}

		const actionLabels = foundCategory !== undefined && foundCategory !== null && foundCategory.name !== "Other" && foundCategory.action_labels.length > 0 ? ["No Label"].concat(foundCategory.action_labels) : []

		var bgColor = "#61afee";
		if (data.method === "POST") {
			bgColor = "#49cc90";
		} else if (data.method === "PUT") {
			bgColor = "#fca130";
		} else if (data.method === "PATCH") {
			bgColor = "#50e3c2";
		} else if (data.method === "DELETE") {
			bgColor = "#f93e3e";
		} else if (data.method === "HEAD") {
			bgColor = "#9012fe";
		}

		//console.log("Category: ", foundCategory, actionLabels)

		return (
			<Paper
				style={wrappedStyle}
				onMouseOver={() => {
					setHoveredItem(true);
				}}
				onMouseOut={() => {
					setHoveredItem(false);
				}}
			>
				<Tooltip
					title={data.description === null || data.description === undefined ? urlPath : <Typography variant="body2"> {parsedName} <br/><br/>{data.method} {urlPath}<br/><br />{data.description}
					</Typography>
					}
					placement="left"
				>
					<div
						style={{
							marginLeft: 10,
							width: "100%",
							cursor: "pointer",
							maxWidth: 725,
							overflowX: "hidden",
							overflowY: "hidden",
						}}
						onClick={() => {
							if (app.actions !== undefined) {
								var newselectedaction = app.actions.find((item) => item.name.toLowerCase().replaceAll(" ", "_").replaceAll(".", "").replaceAll("(", "").replaceAll(")", "") === methodName)
								
								if (newselectedaction === undefined || newselectedaction === null) {
									newselectedaction = app.actions.find((item) => item.name.toLowerCase().replaceAll(" ", "_").replaceAll(".", "").replaceAll("(", "").replaceAll(")", "") === data.name.toLowerCase().replaceAll(" ", "_").replaceAll(".", "").replaceAll("(", "").replaceAll(")", ""))
									if (newselectedaction === undefined || newselectedaction === null) {
										for (var key in app.actions) {
											console.log(methodName, app.actions[key].name.toLowerCase().replaceAll(" ", "_"));
										}

										toast(`Name ${methodName} not found. Please contact us.`);
										return;
									}
								}

								newselectedaction.app_id = app.id;
								newselectedaction.app_name = app.name;
								newselectedaction.app_version = app.app_version;

								newselectedaction.authentication = selectedAction.authentication;
								newselectedaction.authentication_id =  selectedAction.authentication_id;
								newselectedaction.selectedAuthentication = selectedAction.selectedAuthentication;
									
								if (
									app.authentication.required &&
									newselectedaction.authentication_id !== undefined &&
									newselectedaction.authentication_id !== null &&
									newselectedaction.authentication_id.length === 0
								) {
									const tmpParams = selectedAction.parameters;
									selectedAction.parameters = [];

									for (var paramkey in app.authentication.parameters) {
										var item = app.authentication.parameters[paramkey];
										item.configuration = true;

										const found = selectedAction.parameters.find(
											(param) => param.name === item.name
										);
										if (found === null || found === undefined) {
											selectedAction.parameters.push(item);
										}
									}

									for (var paramkey in tmpParams) {
										var item = tmpParams[paramkey];
										//item.configuration = true

										const found = selectedAction.parameters.find(
											(param) => param.name === item.name
										);
										if (found === null || found === undefined) {
											selectedAction.parameters.push(item);
										}
									}
								}

								setSelectedAction(newselectedaction);
							}

							setCurrentAction(data);
							setCurrentActionMethod(data.method);
							setUrlPathQueries(data.queries);
							setUrlPath(data.url);

							/*
							if (selectedTab !== 1) {
								setSelectedTab(1);
							}
							*/
						}}
					>
						<div style={{ display: "flex", marginBottom: 5 }}>
							<MethodWrapper data={data} />
							<span style={{maxWidth: 175, minWidth: 175, overflow: "hidden", marginRight: 5, }}>
								<Typography
									variant="body1"
									style={{
										marginTop: urlPath.length > 0 ? "auto" : 3,
										marginBottom: "auto",
										textAlign: "left",
										overflow: "hidden",
										maxHeight: 27,
										maxWidth: 175,
									}}
								>
									{parsedName}
								</Typography>
								{urlPath.length > 0 ? 
									<Typography variant="body2" color="textSecondary"> 
										{urlPath}
									</Typography>
								: null}
							</span>
							{actionLabels.length > 0 && newWorkflowCategories !== undefined && newWorkflowCategories !== null && newWorkflowCategories.length > 0 && categories.length > 0 ? 
								<Select
									fullWidth
									onChange={(e) => {
										console.log("Should change: ", e.target.value, " Index: ", index)

										const foundIndex = actions.findIndex((action) => action.name === data.name)
										console.log("Found index: ", foundIndex)
										if (foundIndex !== undefined && foundIndex !== null && foundIndex >= 0) {
											actions[foundIndex].action_label = e.target.value
											setActions(actions)
											setUpdate(Math.random())

											// Should send recommendations to the owner
												
											if (creatorProfile.github_username !== undefined && creatorProfile.github_username !== null && creatorProfile.github_username.length > 0) {
												const labelData = {
													"app_id": app.id,
													"action_name": data.name,
													"label": e.target.value
												}

												// Should send recommendations to the owner
												var url = `${globalUrl}/api/v1/apps/label`;
												fetch(url, {
													method: "POST",
													headers: {
													  "Content-Type": "application/json",
													  "Accept": "application/json",
													},
													body: JSON.stringify(labelData),
													credentials: "include",
												})
													.then((response) => response.json())
													.then((responseJson) => {
														if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.length > 0) {
															toast(responseJson.reason)
														}
													})
													.catch((error) => {
														console.log("Error: ", error)
													});

											}
										}
									}}
									value={data.action_label.toLowerCase().replaceAll(" ", "_")}
									style={{
										border: data.action_label === undefined || data.action_label === "No Label" ? "" : `2px solid ${bgColor}`,
										borderRadius: theme.shape.borderRadius,
										backgroundColor: inputColor,
										paddingLeft: 10,
										color: "white",
										height: 30,
										maxWidth: 35, 
										marginLeft: 10, 
										marginRight: 10, 
										overflow: "hidden",
									}}
									inputProps={{
										name: "Method",
										id: "method-option",
									}}
								>
									{actionLabels.map((label, labelindex) => {
										//label = label.toLowerCase().replaceAll(" ", "_")
										if (label === undefined || label === null) {
											return null
										}

										return (
											<MenuItem
												key={labelindex}
												value={label.toLowerCase().replaceAll(" ", "_")}
												style={{ 
												}}
											>
												{label}
											</MenuItem>
										)
									})}
									<Divider />
									<MenuItem
										key={"app_validation"}
										value={"app_validation"}
										style={{ 
										}}
									>
										App Validation
									</MenuItem>
								</Select>
							: null}
						</div>
					</div>
				</Tooltip>
			</Paper>
		);
	};

	const foundCategory = newWorkflowCategories !== undefined && newWorkflowCategories !== null && newWorkflowCategories.length > 0 ? categories.find((x) => x.name === newWorkflowCategories[0]) : undefined
  const LoopActions = (props) => {
    const { actions } = props;

    //const [activeActions] = useState(actions === undefined ? [] : actions);

    if (actions === undefined || actions === null || actions.length === 0) {
      return null;
    }

    return (
      <div>
        {actions.map((data, index) => {
					if (data.action_label === undefined || data.action_label === null || data.action_label.length === 0) {
						data.action_label = "No Label"
					}

          return (
            <SubAction
              key={index}
              data={data}
              selected={currentAction.name === data.name}
              index={index}
            />
          );
        })}
      </div>
    );
    //</Scrollbars>
  };

  const ParsedActionHandler = () => {
    const passedOrg = { id: "", name: "" };
    const owner = "";
    const passedTags = ["single test"];

    const [, setUpdate] = useState();
    const [authenticationModalOpen, setAuthenticationModalOpen] = useState(false);
    const [selectedApp, setSelectedApp] = useState({
      versions: [
        {
          id: selectedAction.app_id,
          version: selectedAction.app_version,
        },
      ],
      loop_versions: [selectedAction.app_version],
      id: selectedAction.app_id,
      name: selectedAction.app_name,
      version: selectedAction.app_version,
    });

    const [requiresAuthentication, setRequiresAuthentication] = useState(
      app.authentication.required &&
        app.authentication.parameters !== undefined &&
        app.authentication.parameters !== null
    );
    const [workflow, setWorkflow] = useState({
      name: "",
      description: "",
      actions: [selectedAction],
      start: selectedAction.id,
      tags: passedTags,
      execution_org: passedOrg,
      org_id: passedOrg.id,
      id: uuidv4(),
      isValid: true,
      owner: owner,
      created: Date.now(),
    });

    const EndpointData = () => {
      const [tmpVar, setTmpVar] = React.useState("");

      return (
        <div>
          The API endpoint to use (URL) - predefined in the app
          <TextField
            style={{
              backgroundColor: inputColor,
              borderRadius: theme.palette?.borderRadius,
            }}
            InputProps={{
              style: {
                color: "white",
                height: 50,
                fontSize: "1em",
              },
            }}
            fullWidth
            type="text"
            color="primary"
            disabled={true}
            placeholder="Bearer token"
            defaultValue={selectedApp.link}
            onChange={(event) => {
              setTmpVar(event.target.value);
            }}
            onBlur={() => {
              selectedApp.link = tmpVar;
              console.log("LINK: ", selectedApp.link);
              setSelectedApp(selectedApp);
            }}
          />
        </div>
      );
    };

    const setAppActionAuthentication = (newauth) => {
      if (app.authentication.required) {
        var findAuthId = "";
        if (
          selectedAction.authentication_id !== null &&
          selectedAction.authentication_id !== undefined &&
          selectedAction.authentication_id.length > 0
        ) {
          findAuthId = selectedAction.authentication_id;
        }

        var baseAuthOptions = [];
        for (var key in newauth) {
          var item = newauth[key];

          const newfields = {};
          for (var filterkey in item.fields) {
            newfields[item.fields[filterkey].key] = item.fields[filterkey].value;
          }

          item.fields = newfields;
          if (item.app.name === app.name) {
            baseAuthOptions.push(item);

            if (item.id === findAuthId) {
              selectedAction.selectedAuthentication = item;
            }
          }
        }

        selectedAction.authentication = baseAuthOptions;
        //console.log("Authentication: ", authenticationOptions)
        if (
          selectedAction.selectedAuthentication === null ||
          selectedAction.selectedAuthentication === undefined ||
          selectedAction.selectedAuthentication.length === ""
        ) {
          selectedAction.selectedAuthentication = {};
        }
      } else {
        selectedAction.authentication = [];
        selectedAction.authentication_id = "";
        selectedAction.selectedAuthentication = {};
      }

      setSelectedAction(selectedAction);
      console.log("Action: ", selectedAction);
    };

    //{selectedAction.authentication !== undefined && selectedAction.authentication.length > 0 ?
    const getAppAuthentication = () => {
      if (serverside === true) {
        return;
      }

      fetch(globalUrl + "/api/v1/apps/authentication", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        credentials: "include",
      })
        .then((response) => {
          if (response.status !== 200) {
            console.log("Status not 200 for app auth :O!");
          }

          return response.json();
        })
        .then((responseJson) => {
          if (responseJson.success && responseJson.data !== undefined && responseJson.data !== null && responseJson.data.length !== 0) {
            var newauth = [];

			//console.log("Got auth. Trying to map to selectedAction appname: ", selectedAction)
			var authUpdate = false;
			const appname = selectedAction.app_name.toLowerCase().replaceAll(" ", "_")
			selectedAction.authentication = []

            for (var key in responseJson.data) {
              if (responseJson.data[key].defined === false) {
                continue;
              }

              if (responseJson.data[key].active === false) {
                continue;
              }

              newauth.push(responseJson.data[key]);

				if (responseJson.data[key].app === undefined || responseJson.data[key].app === null) {
					continue
				}

				if (responseJson.data[key].app.name.toLowerCase().replaceAll(" ", "_") === appname) {
					console.log("Found matching app name: ", responseJson.data[key].app.name)
					selectedAction.authentication.push(responseJson.data[key])
					selectedAction.authentication_id = responseJson.data[key].id
					selectedAction.selectedAuthentication = responseJson.data[key]
					authUpdate = true;
				}
}

			console.log("New auth: ", newauth)
			if (authUpdate === true) {
				setSelectedAction(selectedAction)
			}

						//setUpdate(Math.random())
            setAppAuthentication(newauth);
            setAppActionAuthentication(newauth);
          } else {
            if (app.authentication.required) {
              const tmpParams = selectedAction.parameters;
              selectedAction.parameters = [];

              for (var paramkey in app.authentication.parameters) {
                var item = app.authentication.parameters[paramkey];
                item.configuration = true;

                const found = selectedAction.parameters.find(
                  (param) => param.name === item.name
                );
                if (found === null || found === undefined) {
                  selectedAction.parameters.push(item);
                }
              }

              for (var paramkey in tmpParams) {
                var item = tmpParams[paramkey];
                //item.configuration = true

                const found = selectedAction.parameters.find((param) => param.name === item.name);
                
                if (found === null || found === undefined) {
                  selectedAction.parameters.push(item);
                }
              }

              setSelectedAction(selectedAction);
            }

            //toast("Failed getting authentications")
          }
        })
        .catch((error) => {
          toast("Auth loading error: " + error.toString());
        });
    };

    if (!authLoaded && appAuthentication.length === 0 && selectedAction.id !== undefined) {
      setAuthLoaded(true);
      getAppAuthentication();
    } else if (
      selectedAction.id === undefined &&
      currentAction.name !== undefined &&
      currentAction.name !== null &&
      currentAction.name.length > 0
    ) {
      var methodName = `${currentAction.method}_${currentAction.name}`;
      if (
        currentAction.method.toLowerCase() === "custom" ||
        currentAction.name
          .toLowerCase()
          .startsWith(currentAction.method.toLowerCase())
      ) {
        methodName = currentAction.name;
      }

      methodName = methodName.toLowerCase().replaceAll(" ", "_");
      if (app.actions !== null && app.actions !== undefined) {
        var newselectedaction = app.actions.find(
          (item) => item.name.toLowerCase().replaceAll(" ", "_") === methodName
        );
        if (newselectedaction !== undefined && newselectedaction !== null) {
          newselectedaction.app_id = app.id;
          newselectedaction.app_name = app.name;
          newselectedaction.app_version = app.app_version;
          newselectedaction.authentication = [];
          newselectedaction.authentication_id = "";
          newselectedaction.selectedAuthentication = {};
          setSelectedAction(newselectedaction);
        }
      }
    }

    const setNewAppAuth = (appAuthData) => {
      if (serverside === true) {
        return;
      }

      //console.log("DAta: ", appAuthData)
      fetch(globalUrl + "/api/v1/apps/authentication", {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(appAuthData),
        credentials: "include",
      })
        .then((response) => {
          if (response.status !== 200) {
            console.log("Status not 200 for setting app auth :O!");
          }

          return response.json();
        })
        .then((responseJson) => {
          if (!responseJson.success) {
            toast("Failed to set app auth: " + responseJson.reason);
          } else {
            getAppAuthentication(true);
            setAuthenticationModalOpen(false);

            // Needs a refresh with the new authentication..
            //toast("Successfully saved new app auth")
          }
        })
        .catch((error) => {
          toast("Auth error: ", error.toString());
        });
    };

    const AuthenticationData = (props) => {
      const selectedApp = props.app;

      const [authenticationOption, setAuthenticationOptions] = React.useState({
        app: JSON.parse(JSON.stringify(selectedApp)),
        fields: {},
        label: "",
        usage: [
          {
            workflow_id: workflow.id,
          },
        ],
        id: uuidv4(),
        active: true,
      });

      if (selectedApp.authentication === undefined) {
        return null;
      }

      if (
        selectedApp.authentication.parameters === null ||
        selectedApp.authentication.parameters === undefined ||
        selectedApp.authentication.parameters.length === 0
      ) {
        return null;
      }

      authenticationOption.app.actions = [];

      for (var key in selectedApp.authentication.parameters) {
        if (
          authenticationOption.fields[
            selectedApp.authentication.parameters[key].name
          ] === undefined
        ) {
          authenticationOption.fields[
            selectedApp.authentication.parameters[key].name
          ] = "";
        }
      }

      const handleSubmitCheck = () => {
        if (authenticationOption.label.length === 0) {
          authenticationOption.label = `Auth for ${selectedApp.name}`;
          //toast("Label can't be empty")
          //return
        }

        for (var key in selectedApp.authentication.parameters) {
          if (
            authenticationOption.fields[
              selectedApp.authentication.parameters[key].name
            ].length === 0
          ) {
            toast(
              "Field " +
                selectedApp.authentication.parameters[key].name +
                " can't be empty"
            );
            return;
          }
        }

        console.log("Action: ", selectedAction);
        selectedAction.authentication_id = authenticationOption.id;
        selectedAction.selectedAuthentication = authenticationOption;
        if (
          selectedAction.authentication === undefined ||
          selectedAction.authentication === null
        ) {
          selectedAction.authentication = [authenticationOption];
        } else {
          selectedAction.authentication.push(authenticationOption);
        }

        setSelectedAction(selectedAction);

        var newAuthOption = JSON.parse(JSON.stringify(authenticationOption));
        var newFields = [];
        for (const key in newAuthOption.fields) {
          const value = newAuthOption.fields[key];
          newFields.push({
            key: key,
            value: value,
          });
        }

        console.log("FIELDS: ", newFields);
        newAuthOption.fields = newFields;
        setNewAppAuth(newAuthOption);
        //appAuthentication.push(newAuthOption)
        //setAppAuthentication(appAuthentication)
        //

        setUpdate(authenticationOption.id);

        /*
					{selectedAction.authentication.map(data => (
					<MenuItem key={data.id} style={{backgroundColor: inputColor, color: "white"}} value={data}>
				*/
      };

      if (
        authenticationOption.label === null ||
        authenticationOption.label === undefined
      ) {
        authenticationOption.label = selectedApp.name + " authentication";
      }

      return (
        <div>
          <DialogContent>
            <a
              target="_blank"
              rel="norefferer"
              href="https://shuffler.io/docs/apps#authentication"
              style={{ textDecoration: "none", color: "#f85a3e" }}
            >
              What is this?
            </a>
            <div />
            These are required fields for authenticating with {selectedApp.name}
            <div style={{ marginTop: 15 }} />
            <b>Name - what is this used for?</b>
            <TextField
              style={{
                backgroundColor: inputColor,
                borderRadius: theme.palette?.borderRadius,
              }}
              InputProps={{
                style: {
                  color: "white",
                  marginLeft: "5px",
                  maxWidth: "95%",
                  height: 50,
                  fontSize: "1em",
                },
              }}
              fullWidth
              color="primary"
              placeholder={"Auth july 2020"}
              defaultValue={`Auth for ${selectedApp.name}`}
              onChange={(event) => {
                authenticationOption.label = event.target.value;
              }}
            />
            {selectedApp.link.length > 0 ? (
              <div style={{ marginTop: 15 }}>
                <EndpointData />
              </div>
            ) : null}
            <Divider
              style={{
                marginTop: 15,
                marginBottom: 15,
                backgroundColor: "rgb(91, 96, 100)",
              }}
            />
            <div style={{}} />
            {selectedApp.authentication.parameters !== undefined &&
            selectedApp.authentication.parameters !== null
              ? selectedApp.authentication.parameters.map((data, index) => {
                  return (
                    <div key={index} style={{ marginTop: 10 }}>
                      <LockOpenIcon style={{ marginRight: 10 }} />
                      <b>{data.name}</b>
                      <TextField
                        style={{
                          backgroundColor: inputColor,
                          borderRadius: theme.palette?.borderRadius,
                        }}
                        InputProps={{
                          style: {
                            color: "white",
                            marginLeft: "5px",
                            maxWidth: "95%",
                            height: 50,
                            fontSize: "1em",
                          },
                        }}
                        fullWidth
                        type={
                          data.example !== undefined &&
                          data.example.includes("***")
                            ? "password"
                            : "text"
                        }
                        color="primary"
                        placeholder={data.example}
                        onChange={(event) => {
                          authenticationOption.fields[data.name] =
                            event.target.value;
                        }}
                      />
                    </div>
                  );
                })
              : null}
          </DialogContent>
          <DialogActions>
            <Button
              style={{ borderRadius: "0px" }}
              onClick={() => {
                setAuthenticationModalOpen(false);
              }}
              color="primary"
            >
              Cancel
            </Button>
            <Button
              style={{ borderRadius: "0px" }}
              onClick={() => {
                handleSubmitCheck();
              }}
              color="primary"
            >
              Submit
            </Button>
          </DialogActions>
        </div>
      );
    };

    const authenticationModal = authenticationModalOpen ? (
      <Dialog
        open={authenticationModalOpen}
        onClose={() => {
          //setAuthenticationModalOpen(false)
        }}
        PaperProps={{
          style: {
            backgroundColor: surfaceColor,
            color: "white",
            minWidth: 600,
            padding: 15,
          },
        }}
      >
        <IconButton
          style={{
            zIndex: 5000,
            position: "absolute",
            top: 14,
            right: 14,
            color: "grey",
          }}
          onClick={() => {
            setAuthenticationModalOpen(false);
          }}
        >
          <CloseIcon />
        </IconButton>
        <DialogTitle>
          <div style={{ color: "white" }}>
            Authentication for {selectedApp.name}
          </div>
        </DialogTitle>

        {/*<AuthenticationData app={app} />*/}

				{app.authentication.type === "oauth2" || app.authentication.type === "oauth2-app" ?
					<AuthenticationOauth2
						selectedApp={app}
						selectedAction={{
							"app_name": app.name,
							"app_id": app.id,
							"app_version": app.version,
							"large_image": app.large_image,
						}}
						authenticationType={app.authentication}
						isCloud={true}
						authButtonOnly={true}
						getAppAuthentication={getAppAuthentication}
    					isLoggedIn={isLoggedIn}
					/>
					:
					<AuthenticationWindow
						selectedApp={app}
						globalUrl={globalUrl}
						getAppAuthentication={getAppAuthentication}
						appAuthentication={appAuthentication}
						authenticationModalOpen={authenticationModalOpen}
						setAuthenticationModalOpen={setAuthenticationModalOpen}
    				isLoggedIn={isLoggedIn}
					/>
				}
      </Dialog>
    ) : null;

    const selectedNameChange = (event) => {
	  if (event.target === undefined || event.target === null || event.target.value === undefined || event.target.value === null || event.target.value.length === 0) {
		  return 
	  }


      //console.log("OLDNAME: ", selectedAction.name)
      event.target.value = event.target.value.replaceAll("(", "");
      event.target.value = event.target.value.replaceAll(")", "");
      event.target.value = event.target.value.replaceAll("$", "");
      event.target.value = event.target.value.replaceAll("#", "");
      event.target.value = event.target.value.replaceAll(".", "");
      event.target.value = event.target.value.replaceAll(",", "");
      event.target.value = event.target.value.replaceAll(" ", "_");
      selectedAction.label = event.target.value;
      setSelectedAction(selectedAction);
    };

    const actionStyling = {
      width: "100%",
    };

    //backgroundColor: "#1F2023",
    const appApiViewStyle = {
      display: "flex",
      flexDirection: "column",
      color: "white",
      minHeight: "100%",
      zIndex: 1000,
      resize: "vertical",
      overflowY: "auto",
      overflowX: "hidden",
      maxHeight: 680,
      paddingRight: 7,
    };
		// maxWidth: 420,

    return (
      <span>
        {authenticationModal}

        {selectedAction.id !== undefined ? (
          <ParsedAction
            selectedAction={selectedAction}
            workflow={workflow}
            setWorkflow={setWorkflow}
            setSelectedAction={setSelectedAction}
            setUpdate={setUpdate}
            selectedApp={app}
            setAuthenticationModalOpen={setAuthenticationModalOpen}
            selectedNameChange={selectedNameChange}
            appApiViewStyle={appApiViewStyle}
            globalUrl={globalUrl}
            requiresAuthentication={requiresAuthentication}
            hideExtraTypes={true}
            setNewSelectedAction={undefined}
            environments={[]}
            selectedActionEnvironment={undefined}
            setSelectedActionEnvironment={undefined}
            showEnvironment={false}
            rightsidebarStyle={actionStyling}
            setCodeModalOpen={undefined}
            setLastSaved={undefined}
            setVariablesModalOpen={undefined}
            setCurrentView={undefined}
            setSelectedTrigger={undefined}
            setSelectedEdge={undefined}
            setSelectedApp={setSelectedApp}
            getParents={undefined}
            setSelectedResult={undefined}
            cy={undefined}
            workflowExecutions={[]}
          />
        ) : null}
      </span>
    );
  };

  const SelectedActionView = (props) => {
    const { action } = props;
    //console.log("Parsedaction: ", selectedAction)
    const parsedName = parseName(action.name);
    const splitHeaders = action.headers === undefined || action.headers === null ? [] : action.headers.split("\n");

    return (
      <div style={{ minWidth: 400, maxWidth: 400, marginLeft: 10, marginRight: 20, }}>
        <div style={{ display: "flex", marginTop: 10 }}>
          <MethodWrapper data={action} />
          <Typography variant="body1" style={{ marginTop: 5 }}>
            {parsedName}
          </Typography>
        </div>

        <ParsedActionHandler />
      </div>
    );
  };


	const AppDetails = (props) => {
		const { title, inputTitle } = props

		const [details, setDetails] = useState("")


		return (
			<span>
				<TextField
					fullWidth
					margin="dense"
					id="outlined-basic"
					label={title}
					variant="outlined"
					defaultValue={inputTitle}
					style={{ 
						minWidth: 600,
						maxWidth: 600,
						marginRight: 10,
					}}
					// endornament for submit
					onChange={(event) => {
						setDetails(event.target.value)
					}}
					onBlur={(event) => {
						submitAppDetails(title.toLowerCase().replaceAll(" ", "_"), details)
					}}
				/>
			</span>
		)
	}

  const imageStyle = {
    borderRadius: theme.palette?.borderRadius,
    border: "1px solid rgba(255,255,255,0.6)",
    minWidth: 100,
    maxWidth: 100,
    minhHight: 100,
    maxHeight: 100,
  };

  const textStyle = {
    marginLeft: 15,
    marginTop: 15,
  };

	const submitAppDetails = (field, value) => {
		console.log("To submit. Skipping if value is empty: ", field, value)

		if (value === undefined || value === null || (value.length === 0 && field !== "triggers")) {
			return
		}

		//toast("Submitting details for field", field)
		const data = {
			field: field,
			value: value,
			app_id: app.id,
		}

		fetch(globalUrl + "/api/v1/apps/label", {
		  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 stream results :O!");
			}

			return response.json();
		  })
		  .then((responseJson) => {
			  if (responseJson.success === false) {
				  if (responseJson.reason === undefined) {
					toast("Failed to submit details for field ", field, " because ", responseJson.reason)
				  } else {
					toast("Failed to submit details for field ", field, " because ", responseJson.reason)
				  }
			  } else {
				toast("Successfully submitted details for field ", field)
			  }
		  })
		  .catch((error) => {
			  console.log("Error: ", error)
			  toast("Error submitting details for field ", field)
		  })
	}

  const editTrigger = (triggerName) => {
	  console.log("Editing trigger: ", triggerName)

	  var found = false
	  for (var i = 0; i < triggers.length; i++) {
		  if (triggers[i].name === triggerName) {
			  found = true
			  break
		  }
	  }

	  var newtriggers = JSON.parse(JSON.stringify(triggers))
	  if (!found) {
		  // Find the trigger with the same name in imported workflowTriggers
		  var importedTrigger = undefined
		  for (var i = 0; i < workflowTriggers.length; i++) {
			  if (workflowTriggers[i].name.toLowerCase() === triggerName.toLowerCase()) {
				  newtriggers.push(workflowTriggers[i])
				  break
			  }
		  }

	  } else {
		  // Remove
		  newtriggers = newtriggers.filter((trigger) => trigger.name !== triggerName)
	  }

	  console.log("Triggers: ", newtriggers)
	  setTriggers(newtriggers)

	  var parsedtriggers = []
	  for (var i = 0; i < newtriggers.length; i++) {
		  parsedtriggers.push(newtriggers[i].name)
	  }

	  submitAppDetails("triggers", parsedtriggers.join(","))
  }

  	const removeAppFromSearchEngine = (appID) => { 
	  	toast(`Removing app ${appId} from search engine`)

		const field = "public"
	  	const data = {
			field: field,
			value: "false",
			app_id: appID,
		}

		fetch(globalUrl + "/api/v1/apps/label", {
		  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 stream results :O!");
			}

			return response.json();
		  })
		  .then((responseJson) => {
			  if (responseJson.success === false) {
				  if (responseJson.reason === undefined) {
					toast.error("Failed removing app from search engine.") 
				  } else {
					toast.error("Failed to remove app from search engine because: " + responseJson.reason)
				  }
			  } else {
				toast.info("Successfully unpublished app. It can still be accessed by direct link.")
			  }
		  })
		  .catch((error) => {
			  console.log("Error: ", error)
			  toast.info("Error when removing app from search engine.")
		  })
  }

  const deduplicateByName = (array) => {
    const uniqueNames = {};
    return array.filter(item => {
		if (!item?.hasOwnProperty('name') || !item?.name?.length) {
		  return true
		}
		if (!uniqueNames[item.name]) {
		  uniqueNames[item.name] = true
		  return true
		}
		return false
    })
  }

	const ActionSelectOption = (actionprops) => {
		const { option, newActionname, newActiondescription, useIcon, extraDescription, } = actionprops;
  		const [hover, setHover] = React.useState(false);

		return (
			<Tooltip
			  color="secondary"
			  title={newActiondescription}
			  placement="left"
			>
				<div style={{
					cursor: "pointer", 
					padding: 8, 
					paddingLeft: 14, 
					paddingBottom: 4,
					backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor,
				}} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
				onClick={(event) => {
					console.log("Clicked on action: ", option)


					if (option !== undefined && option !== null) { 
						setSelectedValidationAction(option)

						const labelData = {
							"app_id": app.id,
							"action_name": option.name,
							"label": "app_validation",
						}

						// Should send recommendations to the owner
						var url = `${globalUrl}/api/v1/apps/label`;
						fetch(url, {
							method: "POST",
							headers: {
							  "Content-Type": "application/json",
							  "Accept": "application/json",
							},
							body: JSON.stringify(labelData),
							credentials: "include",
						})
						.then((response) => response.json())
						.then((responseJson) => {
							if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason.length > 0) {
								toast(responseJson.reason)
							}
						})
						.catch((error) => {
							console.log("Error: ", error)
						})

						// Update the app itself?
						/*
                		setNewSelectedAction({ 
							target: { 
								value: option.name 
							} 
						});
						*/
              		}
				}}
				>
					<div style={{ display: "flex", marginBottom: 0,}}>
						<span
							style={{
								marginRight: 10,
								marginTop: "auto",
								marginBottom: 0,
							}}
						>
							{useIcon}
						</span>
						<span style={{marginBottom: 0, marginTop: 3, }}>{newActionname}</span>
					</div>
					{extraDescription.length > 0 ? 
						<Typography variant="body2" color="textSecondary" style={{marginTop: 0, overflow: "hidden", whiteSpace: "nowrap", display: "block",}}>
							{extraDescription}	
						</Typography>
					: null}
				</div>
			</Tooltip>
		)
	}

  const userRoles = ["you", "public"];

  const updateAppField = (app_id, fieldname, fieldvalue) => {
      const data = {};
      data[fieldname] = fieldvalue;
  
  
      console.log("DATA: ", data);
  
      fetch(globalUrl + "/api/v1/apps/" + app_id, {
        method: "PATCH",
        headers: {
          Accept: "application/json",
        },
        body: JSON.stringify(data),
        credentials: "include",
      })
        .then((response) => {
          //setAppSearchLoading(false)
          return response.json();
        })
        .then((responseJson) => {
          //console.log(responseJson)
          //toast(responseJson)
          if (responseJson.success) {
            toast("Successfully updated app configuration");
          } else {
            if (responseJson.reason !== undefined && responseJson.reason !== null) {
              toast("Error: "+responseJson.reason);
            } else {
              toast("Error updating app configuration. Are you the owner of this app?");
        }
          }
        })
        .catch((error) => {
          toast(error.toString());
        });
    };

  const sortByCategoryLabel = (a, b) => {
	  const aHasCategoryLabel = a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0
	  const bHasCategoryLabel = b.category_label !== undefined && b.category_label !== null && b.category_label.length > 0

	  // Sort by existence and length of "category_label"
	  if (aHasCategoryLabel && !bHasCategoryLabel) {
		return -1
	  } else if (!aHasCategoryLabel && bHasCategoryLabel) {
		return 1
	  } else {
		return 0
	  }
  }

  const getDownloadUrl = () => {

	  console.log("APP: ", app)

	  const appEnding = app?.public === true ? app?.app_version : app?.id

	  return `curl -L \ \\\n    "${globalUrl}/api/v1/download_docker_image?image=frikky/shuffle:${app?.name.toLowerCase().replaceAll(' ', '_')}_${appEnding}" \\\n    -H \"Authorization: Bearer APIKEY" \\\n    -o image.zip; \\\n    docker load -i image.zip`
  }

  const renderedActionOptions = deduplicateByName((
	  actions === undefined || actions === null ? [] : 
	  actions.filter((a) => 
		  a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0).concat(sortByKey(actions, "label"))
      ).sort(sortByCategoryLabel))

  const actionView =
    actions === undefined || actions === null ? null : (
      <div style={{ color: "white" }}>
        <div style={{ display: "flex" }}>

          {isMobile || appType === 0 || appType === 2 ? null : (
			<span style={{maxWidth: 350, minWidth: 350, marginRight: 10, marginLeft: 10, marginTop: 10, }}>
				<div
					style={{
						maxHeight: 800,
						overflowY: "auto",
						overflowX: "hidden",
					}}
				>
					<LoopActions actions={actions} />
				</div>
			</span>
          )}

          <Paper
            style={{
              flex: 6,
              margin: 10,
              padding: 30,
              backgroundColor: boxStyle.backgroundColor,
              color: theme.palette.text.primary,
              textAlign: "left",
              paddingBottom: 50,
              overflow: "hidden",

			  margin: "auto",
            }}
          >
            <Tabs
			  color="secondary"
              indicatorColor="primary"
			  textColor="secondary"
			  variant="fullWidth"
              value={selectedTab}
              onChange={(event, newValue) => {
				if (newValue === 1 && appType === 0 || appType === 2) {
					window.open(`/apis/${app.id}`, "_blank")
				} else {
                	setSelectedTab(newValue)
				}
              }}
              style={{ marginBottom: 0, marginLeft: 0, marginRight: 0, minWidth: 800, maxWidth: 800, margin: "auto", }}
              aria-label="disabled tabs example"
            >
              <Tab style={{marginLeft: 0, color: theme.palette.text.primary }} icon={<DescriptionIcon />} label="Docs" />
              <Tab icon={appType === 0 || appType === 2 ? <OpenInNewIcon /> : <AppsIcon />} label={appType === 0 || appType === 2 ? "Explore the API" : "Try it out"} />

              <Tab icon={<ShowChartIcon />} style={{color: theme.palette.text.primary}} label="Stats" />
              <Tab icon={<PolylineIcon />} disabled style={{color: theme.palette.text.secondary}} label="Integrations" />
              <Tab icon={<PersonIcon />} disabled={userdata.support !== true} style={{color: userdata.support !== true ? theme.palette.text.secondary: theme.palette.text.primary}} label="Creator" value={4}  />
            </Tabs>
            <div style={{ marginTop: 25 }}>
              {selectedTab === 1 && app.skipped_build == false ? (
                <div style={{ display: "flex", marginLeft: 25,  }}>
                  <div style={{ }}>
                    <SelectedActionView action={currentAction} />
                  </div>
                  <div style={{ marginLeft: 25, maxWidth: 350 }}>
										{currentAction.description !== undefined && currentAction.description !== null && currentAction.description !== "" ? 
											<div
                        style={{
                          maxHeight: 175,
                          overflowX: "hidden",
                          overflowY: "auto",
                          marginBottom: 25,
                        }}
                      >
                        <Typography variant="h6" style={{ flex: 10 }}>
                          Action Description
                        </Typography>
                        <Typography
                          variant="body1"
                          color="textSecondary"
                          style={{ maxWidth: 350, minWidth: 350 }}
                        >
                          {currentAction.description}
                        </Typography>
                      </div>
                    : app.description !== undefined &&
											app.description !== null &&
											app.description.length > 0 ? 
                      <div
                        style={{
                          maxHeight: 175,
                          overflowX: "hidden",
                          overflowY: "auto",
                          marginBottom: 25,
                        }}
                      >
                        <Typography variant="h6" style={{ flex: 10 }}>
                          App Description
                        </Typography>
                        <Typography
                          variant="body1"
                          color="textSecondary"
                          style={{ maxWidth: 350, minWidth: 350 }}
                        >
                          {app.description}
                        </Typography>
                      </div>
                     : null}
                    <div style={{ display: "flex" }}>
                      <Typography variant="h6" style={{ flex: 10 }}>
                        Result
                      </Typography>
                      <IconButton
                        disabled={executing || appType === 2}
                        color="primary"
                        style={{
                          border: `1px solid ${theme.palette.primary.main}`,
                        }}
                        variant="contained"
                        onClick={() => {
                          executeSingleAction(
                            selectedAction.app_id,
                            selectedAction
                          );
                        }}
                      >
                        <Tooltip title="Run Action" placement="top">
                          <PlayArrowIcon />
                        </Tooltip>
                      </IconButton>
                    </div>
                    {executing ? (
                      <div style={{ textAlign: "center", width: "100%" }}>
							{serverside === true ? null : 
								<CircularProgress
									style={{
										marginTop: 25,
										height: 35,
										width: 35,
										marginLeft: "auto",
										marginRight: "auto",
									}}
								/>
							}
                      </div>
                    ) : (
                      <div>
                        {executionResult.valid ? (
                          <ReactJson
                            src={executionResult.result}
                            theme={theme.palette.jsonTheme}
                            style={theme.palette.reactJsonStyle}
                            collapsed={false}
                            displayDataTypes={false}
                            enableClipboard={(copy) => {
                              handleReactJsonClipboard(copy);
                            }}
                            onSelect={(select) => {
                              HandleJsonCopy(
                                executionResult.result,
                                select,
                                "exec"
                              );
                              console.log("SELECTED!: ", select);
                            }}
                            name={"Result"}
                          />
                        ) : (
                          <Typography variant="body2">
                            {executionResult.result}
                          </Typography>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              ) : selectedTab === 2 && app.id !== undefined ? (
                <div>

				  <Typography variant="h4">
				  	Use the App onprem (hybrid)
				  </Typography> 
				  <Typography variant="body2" color="textSecondary" style={{marginTop: 5, }}>
				  	Due to using docker containers with privately uploaded containers, we had to use a custom registry. Use the command below to download the image to the server if it fails to run.

				  	It will authenticate and authorize you, before redirecting to a Signed URL on https://storage.googleapis.com

				  	<b>&nbsp;Now also works for ARM containers!</b>
				  </Typography> 

				  <div
				  	style={{
						marginTop: 10, 
				  		padding: 15,
				  		minWidth: "50%",
				  		maxWidth: "100%",
				  		backgroundColor: theme.palette.inputColor,
				  		overflowY: "auto",
				  		// Have it inline
				  		borderRadius: theme.palette?.borderRadius,
				  	}}
				  >
					  <code
						style={{
							// Wrap if larger than X
							whiteSpace: "pre",
							overflow: "auto",
							marginRight: 40,
						}}
					  >
						{getDownloadUrl()}
					  </code>
				  </div>
				  <CopyToClipboard
				  	text={getDownloadUrl()}
				  />

				  <div style={{marginTop: 50, }}>
					  <AppStats
						globalUrl={globalUrl}
						appId={app.id}
						{...props}
					  />
				  </div>
                </div>
              ) : selectedTab === 0 ? (
                <div
                  style={{ minWidth: "100%", maxWidth: "100%", margin: "auto" }}
                >
                  <Markdown
					components={{
						img: Img,
						code: CodeHandler,
						h1: Heading,
						h2: Heading,
						h3: Heading,
						h4: Heading,
						h5: Heading,
						h6: Heading,
						a: OuterLink,
					}}
					id="markdown_wrapper"
					escapeHtml={false}
					style={{
						maxWidth: "100%", minWidth: "100%", 
					}}
                  >
				  	{appDocumentation}
				  </Markdown>
                </div>
              ) : selectedTab === 3 && secondaryApp.objectID !== undefined && app.name !== undefined ? (
                <div
                  style={{
                    maxWidth: "100%",
                    minWidth: "100%",
                    margin: "auto",
                    marginTop: 50,
                  }}
                >
                  <Typography
                    variant="h1"
                    style={{ textAlign: "center", fontSize: 22 }}
                  >
                    Connect {app.name.replaceAll("_", " ")} and{" "}
					{secondaryApp.name.replaceAll("_", " ")}
                  </Typography>
                  <Typography
                    variant="body2"
                    color="textSecondary"
                    style={{ textAlign: "center" }}
                  >
                    Using Shuffle, you can connect{" "}
                    {app.name.replaceAll("_", " ")} and{" "}
                    {secondaryApp.name.replaceAll("_", " ")} with no code.
                  </Typography>
                  <div style={{ display: "flex", marginTop: 25 }}>
                    <div
                      style={{
                        flex: 2,
                        display: "flex",
                        maxHeight: 100,
                        minHeight: 100,
                        border: "1px solid rgba(255,255,255,0.3",
                        marginRight: 10,
                        borderRadius: theme.palette?.borderRadius,
                      }}
                    >
                      <img
                        src={app.large_image}
                        alt={app.name}
                        id="logo"
                        style={imageStyle}
                      />
                      <Typography variant="h6" style={textStyle}>
                        {app.name.replaceAll("_", " ")}
                      </Typography>
                    </div>
                    <div
                      style={{
                        flex: 2,
                        display: "flex",
                        maxHeight: 100,
                        minHeight: 100,
                        border: "1px solid rgba(255,255,255,0.3",
                        marginleft: 10,
                        borderRadius: theme.palette?.borderRadius,
                      }}
                    >
                      <img
                        src={secondaryApp.image_url}
                        alt={secondaryApp.name}
                        id="logo"
                        style={imageStyle}
                      />
                      <Typography variant="h6" style={textStyle}>
                        {secondaryApp.name.replaceAll("_", " ")}
                      </Typography>
                    </div>

                  </div>
                  <div style={{ textAlign: "center", marginTop: 25 }}>
                    <Link
                      rel="noopener noreferrer"
                      to={`/register?app_one=${app.name}&app_two=${secondaryApp.name}&message=You need to login first to connect ${app.name} and ${secondaryApp.name}`}
                      style={{ textDecoration: "none" }}
                    >
                      <Button
                        variant="contained"
                        onClick={() => {
													const allapps = [app.name, secondaryApp.name].sort()

                          ReactGA.event({
                            category: "Appexplorer",
                            action: "app_connect_click",
                            label: `${allapps[0]}_and_${allapps[1]}`,
                          })
                        }}
                        style={{
                          padding: 15,
                          marginTop: 15,
                          borderRadius: 25,
                          height: 50,
                          margin: "15px 0px 15px 0px",
                          fontSize: 14,
                          color: "white",
                          backgroundImage: buttonBackground,
                          marginRight: 10,
                        }}
                      >
                        Connect {app.name.replaceAll("_", " ")} and{" "}
                        {secondaryApp.name.replaceAll("_", " ")}
                      </Button>
                    </Link>
                  </div>


                  <Divider style={{ marginTop: 50, marginBottom: 50 }} />
                  <div
                    style={{
                      minWidth: "100%",
                      maxWidth: "100%",
                      margin: "auto",
                    }}
                  >
                  	<Markdown
				  	  components={{
				  	  	img: Img,
				  	  	code: CodeHandler,
				  	  	h1: Heading,
				  	  	h2: Heading,
				  	  	h3: Heading,
				  	  	h4: Heading,
				  	  	h5: Heading,
				  	  	h6: Heading,
				  	  	a: OuterLink,
				  	  }}
				  	  id="markdown_wrapper"
				  	  escapeHtml={false}
				  	  style={{
				  	  	maxWidth: "100%", minWidth: "100%", 
				  	  }}
                  	>
				  		{appDocumentation}
				  	</Markdown>
                  </div>
                </div>
              ) : 
			  	selectedTab === 4 ? 
					<div>
						<Typography variant="h4">
							App Details
						</Typography> 
						<Typography variant="body2" style={{marginTop: 20, marginBottom: 10, }} color="textSecondary">
							Add more details about your app here. This is to help both the Shuffle team, and the public get easier access to this information. Data from these will be used to track app "completeness" for recommendation systems.
						</Typography> 
				  		<Divider style={{marginTop: 10, marginBottom: 10, }}/>
				  		<Typography variant="h6" style={{marginTop: 20, marginBottom: 10, }}>
				  			Validation Action
				  		</Typography>
						<Typography variant="body2" style={{marginBottom: 20, }} color="textSecondary">
				  			The validation action is the action that is used to validate the app. This is used both when a user wants to validate their auth, as well as when Shuffle runs automatic tests of the app. It is recommended that the action should be a GET request. Validation is decided based on whether the action is ran successfully in a workflow.
						</Typography> 

						<Autocomplete
							id="action_search"
							value={selectedValidationAction}
							classes={{ inputRoot: classes.inputRoot }}
							groupBy={(option) => {
								// Most popular
								// Is categorized
								// Uncategorized
								return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions";
							}}
							renderGroup={(params) => {

								return (
									<li key={params.key}>
										<Typography variant="body1" style={{textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography>
										<Typography variant="body2">{params.children}</Typography>
									</li>
								)	
							}}
							options={renderedActionOptions}
							ListboxProps={{
							  style: {
								backgroundColor: theme.palette.surfaceColor,
								color: "white",
							  },
							}}
							filterOptions={(options, { inputValue }) => {
								const lowercaseValue = inputValue === null ? "" : inputValue.toLowerCase()
								options = options.filter((x) => {
									if (x.name === undefined || x.name === null) {
										x.name = ""
									}

									if (x.description === undefined || x.description === null) {
										x.description = ""
									}

									if (x.method !== "GET") {
										return null
									}

									return x.name.replaceAll("_", " ").toLowerCase().includes(lowercaseValue) || x.description.toLowerCase().includes(lowercaseValue)
								})

								return options
							}}
							getOptionLabel={(option) => {
							  if (option === undefined || option === null || option.name === undefined || option.name === null ) {
								return null;
							  }

							  const newname = (
								option.name.charAt(0).toUpperCase() + option.name.substring(1)
							  ).replaceAll("_", " ");

							  return newname;
							}}
							fullWidth
							style={{
							  backgroundColor: theme.palette.inputColor,
							  height: 50,
							  borderRadius: theme.palette?.borderRadius,
							}}
							onChange={(event, newValue) => {
							  // Workaround with event lol
							  console.log("Changed to: ", event, newValue)
							  toast("Changed validation action") 
							  if (newValue !== undefined && newValue !== null) {
								/*
								setNewSelectedAction({ 
									target: { 
										value: newValue.name 
									} 
								})
								*/
							  }
							}}
							renderOption={(props, option, state) => {
							  var newActionname = option.name;
							  if (option.label !== undefined && option.label !== null && option.label.length > 0) {
								newActionname = option.label;
							  }

							  var newActiondescription = option.description;
							  //console.log("DESC: ", newActiondescription)
							  if (option.description === undefined || option.description === null) {
								newActiondescription = "Description: No description defined for this action"
							  } else {
								newActiondescription = "Description: "+newActiondescription
							  }

							  const iconInfo = GetIconInfo({ name: option.name });
							  const useIcon = iconInfo.originalIcon;

							  if (newActionname === undefined || newActionname === null) {
								  newActionname = "No name"
								  option.name = "No name"
								  option.label = "No name"
							  }

							  newActionname = (newActionname.charAt(0).toUpperCase() + newActionname.substring(1)).replaceAll("_", " ");

								var method = ""
								var extraDescription = ""
								if (option.name.includes("get_")) {
									method = "GET"
								} else if (option.name.includes("post_")) {
									method = "POST"
								} else if (option.name.includes("put_")) {
									method = "PUT"
								} else if (option.name.includes("patch_")) {
									method = "PATCH"
								} else if (option.name.includes("delete_")) {
									method = "DELETE"
								} else if (option.name.includes("options_")) {
									method = "OPTIONS"
								} else if (option.name.includes("connect_")) {
									method = "CONNECT"
								}

								// FIXME: Should it require a base URL?
								if (method.length > 0 && option.description !== undefined && option.description !== null && option.description.includes("http")) {
									var extraUrl = ""
									const descSplit = option.description.split("\n")
									// Last line of descSplit
									if (descSplit.length > 0) {
										extraUrl = descSplit[descSplit.length-1]
									} 

									if (extraUrl.length > 0) {
										if (extraUrl.includes(" ")) {
											extraUrl = extraUrl.split(" ")[0]
										}

										if (extraUrl.includes("#")) {
											extraUrl = extraUrl.split("#")[0]
										}

										extraDescription = `${method} ${extraUrl}`
									} else {
										//console.log("No url found. Check again :)")
									}
								}

							  return (
								<ActionSelectOption
								  {...props}
									option={option}
									newActiondescription={newActiondescription}
									useIcon={useIcon}
									newActionname={newActionname}
									extraDescription={extraDescription}
								/>
							  );
							}}
							renderInput={(params) => {
								if (params.inputProps?.value) {
									const prefixes = ["Post", "Put", "Patch"];
									for (let prefix of prefixes) {
										if (params.inputProps.value.startsWith(prefix)) {
											let newValue = params.inputProps.value.replace(prefix + " ", "");
											if (newValue.length > 1) {
												newValue = newValue.charAt(0).toUpperCase() + newValue.substring(1);
											}
											// Set the new value without mutating inputProps
											params = { ...params, inputProps: { ...params.inputProps, value: newValue } };
											break;
										}
									}
									// Check if it starts with "Get List" and method is "Get"
									if (params.inputProps.value.startsWith("Get List")) {
										console.log("Get List")
									}
								}

								const actionDescription = ""
								const isIntegration = false

								  return (
									  <Tooltip title={actionDescription}
										placement="right" 
										open={false}
										PopperProps={{
											sx: {
											'& .MuiTooltip-tooltip': {
												backgroundColor: 'transparent',
												boxShadow: 'none',
											},
											'& .MuiTooltip-arrow': {
												color: 'transparent',
											},
											},
										}}
										>
											<TextField
											{...params}

											data-lpignore="true"
											autocomplete="off"
											dataLPIgnore="true"
											autoComplete="off"

											color="primary"
											id="checkbox-search"
											variant="body1"
											style={{
												backgroundColor: theme.palette.inputColor,
												borderRadius: theme.palette?.borderRadius,
											}}
											label={"Select Validation Action"}
											variant="outlined"
											name={`disable_autocomplete_${Math.random()}`}
											/>	
										</Tooltip>
								  )
								}}
						/>

				  		<Divider style={{marginTop: 30, marginBottom: 10, }}/>
				  		<Typography variant="h6" style={{marginTop: 20, marginBottom: 10, }}>
				  			Triggers
				  		</Typography>
						<div style={{display: "flex", }}>
							<Typography variant="body1" color="textSecondary" style={{marginTop: 7, }}>
								Schedule:
							</Typography>
							<Checkbox
								checked={triggers === undefined ? false : triggers.find(trigger => trigger.name === "Schedule") !== undefined}
								label="Schedule"
								onChange={(e) => {
									editTrigger("Schedule")

								}}
							/>
							<Typography variant="body1" color="textSecondary" style={{marginTop: 7, marginLeft: 20, }}>
								Webhook:
							</Typography>
							<Checkbox
								checked={triggers === undefined ? false : triggers.find(trigger => trigger.name === "Webhook") !== undefined}
								label="Webhook"
								onChange={() => {
									editTrigger("Webhook")

								}}
							/>
						</div>
				  		{triggers === undefined || triggers === null || triggers.find(trigger => trigger.name === "Webhook") === undefined ? null : 
							<TextField 
								label="Webhook Example response"
								variant="outlined"
								disabled
								fullWidth
								multiline
								style={{
									maxHeight: 200,
								}}

								onBlur={(e) => {
									submitAppDetails("extra_value", e.target.value)
								}}
							/>
						}
				  		<Divider />
				  		<Typography variant="h6" style={{marginTop: 20, marginBottom: 10, }}>
				  			External info	
				  		</Typography>
						<AppDetails 
							title="External Documentation URL"
							inputTitle={app.reference_info.documentation_url === undefined ? "" : app.reference_info.documentation_url}
						/>
						<AppDetails 
							title="Blogpost"
							inputTitle={app.blogpost === undefined ? "" : app.blogpost}
						/>
						<AppDetails 
							title="Video"
							inputTitle={app.video === undefined ? "" : app.video}
						/>

						<Typography variant="h6" style={{marginTop: 20, marginBottom: 10, }}>
							Partner Details
						</Typography> 
						<AppDetails 
							title="Partner Website"
							inputTitle={app.company_url === undefined ? "" : app.company_url}
						/>
						<AppDetails 
							title="Partner Contacts"
							inputTitle={app.reference_info.partner_contacts === undefined ? "" : app.reference_info.partner_contacts}
						/>

				  		<Divider style={{marginTop: 20, }} />

						<Typography variant="h6" style={{marginTop: 20, marginBottom: 10, }}>
				  			Public Status
						</Typography> 
				  		<Button
				  			style={{marginTop: 10, }}
				  			variant="outlined"
							onClick={() => {
								removeAppFromSearchEngine(app.id)
							}}
				  		>
				  			Unpublish App from Search Engine 
				  		</Button>

					</div>
				:
			  (
                <div>
                  <Typography
                    variant="h1"
					color="textSecondary"
                    style={{
					  margin: "auto",
                      textAlign: "center",
                      fontSize: 22,
                      marginTop: 20,
                      paddingTop: 20,
					  maxWidth: 550,
					  minWidth: 550,
                    }}
                  >
                    This app is currently in Beta, but is usable. Interested in using this app? Click the button below or contact us.
                    <div style={{ marginTop: 10 }}>
                    {activateButton}
                    </div>
                  </Typography>

					{app.description !== undefined && 
						app.description !== null &&
						app.description !== "" ? 
							<span style={{textAlign: "center", }}>
								<Typography variant="h6" style={{ marginTop: 50, }}>
									More about the app 
								</Typography>
								<Typography
									variant="body1"
									color="textSecondary"
									style={{ maxWidth: 550, minWidth: 550, margin: "auto", marginTop: 10,  }}
								>
									{app.description}
								</Typography>
							</span>
					: null}
                </div>
              )}
            </div>
          </Paper>
        </div>
      </div>
    );

  // Random names for type & autoComplete. Didn't research :^)
  const imageData = file.length > 0 ? file : fileBase64;
  const height = 100;
  const imageInfo = (
    <img
      src={imageData}
      alt=""
      id="logo"
      style={{
        borderRadius: theme.palette?.borderRadius,
        border: "1px solid rgba(255,255,255,0.6)",
        maxWidth: height,
        maxHeight: height,
        minWidth: height,
        minHeight: height,
        objectFit: "contain",
      }}
    />
  );

  const publishModal = publishModalOpen ? (
    <Dialog
      open={publishModalOpen}
      onClose={() => {
        setPublishModalOpen(false);
      }}
      PaperProps={{
        sx: {
          borderRadius: theme?.palette?.DialogStyle?.borderRadius,
          border: theme?.palette?.DialogStyle?.border,
          minWidth: '500px',
          fontFamily: theme?.typography?.fontFamily,
          backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
          zIndex: 1000,
          '& .MuiDialogContent-root': {
            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
          },
          '& .MuiDialogTitle-root': {
            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
          },
        }
      }}
    >
      <DialogTitle style={{ marginBottom: 0, padding: 50,  paddingBottom: 0, }}>
        <div style={{ textAlign: "center", color: "rgba(255,255,255,0.9)" }}>
          Are you sure you want to PUBLISH this app?
        </div>
      </DialogTitle>
      <DialogContent
        style={{ color: "rgba(255,255,255,0.65)", textAlign: "center", padding: 50, }}
      >
        <div>
          <Typography variant="body1" style={{ marginBottom: 20 }}>
            Before publishing, make sure to sanitize the App for anything you don't want public. 
          </Typography>
          <Typography variant="body1" style={{ marginBottom: 20 }}>
			The published App is yours, and you can always change your public Apps after they are released.
          </Typography>
        </div>
        <Button
          variant="contained"
          color="primary"
          style={{ borderRadius: "2px", textTransform: 'none', fontSize:16,  }}
          onClick={() => {
			updateAppField(selectedApp.id, "sharing", true);
            setPublishModalOpen(false);
          }}
        >
          Yes
        </Button>
        <Button
          style={{ borderRadius: "2px", textTransform: 'none', fontSize:16, color: "#ff8544", marginLeft: 5 }}
          onClick={() => {
            setPublishModalOpen(false);
          }}
          color="primary"
        >
          No
        </Button>
      </DialogContent>
    </Dialog>
  ) : null;

  const landingpageDataBrowser = (
    <div
      style={{
        paddingTop: isMobile ? 0 : 25,
        paddingBottom: 100,
        color: "white",
      }}
    >
      {publishModal}
      <div style={{ display: "flex", position: "relative" }}>
        {isMobile ? null : (
          <Breadcrumbs
            aria-label="breadcrumb"
            separator="›"
            style={{ color: theme.palette.text.primary, marginLeft: 15, flex: 100 }}
          >
            <Link
              to="/search"
              style={{ textDecoration: "none", color: "inherit" }}
            >
              <h2 style={{ color: theme.palette.text.primary }}>
                <AppsIcon style={{ marginRight: 10 }} />
                Apps
              </h2>
            </Link>
            <Link
              to={`/apps/${params.appid}`}
              style={{ textDecoration: "none", color: "inherit" }}
            >
              <h2>{name}</h2>
            </Link>
          </Breadcrumbs>
        )}
        <div
          style={{ position: "absolute", top: 40, right: 10, display: "flex", gap: "10px",}}
        >
          {app.documentation_download_url !== undefined &&
          app.documentation_download_url !== null &&
          app.documentation_download_url.length > 0 ? (
            <IconButton
              color="primary"
              style={{ marginRight: 20 }}
              variant="contained"
              onClick={() => {
                const data = openapi;

                let linkElement = document.createElement("a");
                linkElement.setAttribute("target", "_blank");
                linkElement.setAttribute(
                  "href",
                  app.documentation_download_url
                );
                linkElement.setAttribute(
                  "download",
                  app.documentation_download_url
                );
                linkElement.click();
              }}
            >
              <Tooltip title="Download Documentation" placement="top">
                <DescriptionIcon color="secondary" />
              </Tooltip>
            </IconButton>
          ) : null}
          {appType === 0 || appType === 2 ? (
            <IconButton
              style={{ marginRight: 20 }}
              onClick={() => {
                const data = openapi;
                let exportFileDefaultName = name + ".json";

                let dataStr = JSON.stringify(data);
                let dataUri =
                  "data:application/json;charset=utf-8," +
                  encodeURIComponent(dataStr);
                let linkElement = document.createElement("a");
                linkElement.setAttribute("href", dataUri);
                linkElement.setAttribute("download", exportFileDefaultName);
                linkElement.click();

                const tmpurl = new URL(window.location.href);
                const searchParams = tmpurl.searchParams;
                const queryID = searchParams.get("queryID");

                if (queryID !== undefined && queryID !== null) {
                  aa("init", {
                    appId: "JNSS5CFDZZ",
                    apiKey: "c8f882473ff42d41158430be09ec2b4e",
                  });

                  const timestamp = new Date().getTime();
                  aa("sendEvents", [
                    {
                      eventType: "conversion",
                      eventName: "Public App Downloaded",
                      index: "appsearch",
                      objectIDs: [app.id],
                      timestamp: timestamp,
                      queryID: queryID,
                      userToken:
                        userdata === undefined ||
                        userdata === null ||
                        userdata.id === undefined
                          ? "unauthenticated"
                          : userdata.id,
                    },
                  ]);
                } else {
                  console.log("No query to handle when downloading");
                }
              }}
            >
              <Tooltip title="Download OpenAPI" placement="top">
                <CloudDownloadIcon color={theme.palette.text.primary} />
              </Tooltip>
            </IconButton>
          ) : null}

	  	  {selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.id !== undefined && userdata.support === true ?
			// Iconbutton for authentication with just an icon. Link to /apps/authentication?app_id=app.id
			<IconButton
				color="secondary"
			  	variant="contained"
			    style={{marginRight: 20, }}
			  	onClick={() => {
					window.open(`/appauth?app_id=${app.id}&auth=${selectedOrganization.org_auth.token}`, "_blank")
				}}
			>
				<Tooltip title="Public Authentication link for the current Organization. Times out every 24 hours." placement="top">
				  	<LockOpenIcon color={theme.palette.text.primary}/>
				</Tooltip>
			</IconButton>
		  : null}

	  	  {isMobile || userdata?.active_apps === undefined || userdata?.active_apps === null || !userdata?.active_apps?.includes(appId) ? null :
            <Button
			  variant={userdata.active_apps !== undefined && userdata.active_apps !== null && userdata.active_apps.includes(appId) ? "outlined": "contained"}
              component="label"
              color="primary"
              onClick={() => {
				if (!isLoggedIn) {
					//navigate("/login?message=You must be logged in to activate this app&view=/apps/" + params.appid);
					toast("You must be logged in to activate apps! Go to /login first.") 
					return;
				}

				toast.info("Sending download job to relevant runtime locations")
                
				activateApp("distribute")

              }}
              style={{ height: 40, marginTop: 5 }}
            >
				Push Image
            </Button>
          }

          {isMobile ? null : (
            <Button
			  variant={userdata.active_apps !== undefined && userdata.active_apps !== null && userdata.active_apps.includes(appId) ? "outlined": "contained"}
              component="label"
              color="primary"
              onClick={() => {
				if (!isLoggedIn) {
					//navigate("/login?message=You must be logged in to activate this app&view=/apps/" + params.appid);
					toast("You must be logged in to activate apps! Go to /login first.") 
					return;
				}

                const tmpurl = new URL(window.location.href);
                const searchParams = tmpurl.searchParams;
                const queryID = searchParams.get("queryID");

                if (queryID !== undefined && queryID !== null) {
                  aa("init", {
                    appId: "JNSS5CFDZZ",
                    apiKey: "c8f882473ff42d41158430be09ec2b4e",
                  });

                  const timestamp = new Date().getTime();
                  aa("sendEvents", [
                    {
                      eventType: "conversion",
                      eventName: "Public App Activated",
                      index: "appsearch",
                      objectIDs: [app.id],
                      timestamp: timestamp,
                      queryID: queryID,
                      userToken:
                        userdata === undefined ||
                        userdata === null ||
                        userdata.id === undefined
                          ? "unauthenticated"
                          : userdata.id,
                    },
                  ]);
                } else {
                  console.log("No query to handle when activating");
                }

                activateApp();
              }}
              style={{ height: 40, marginTop: 5 }}
            >
			  {userdata.active_apps !== undefined && userdata.active_apps !== null && userdata.active_apps.includes(appId) ?
				  "Deactivate App"
				  :
				  "Activate App"
			  }
            </Button>
          )}
			{appType === 1 ? null : 
  				userdata?.support || userdata?.id === app?.owner || (userdata?.admin === "true" && userdata?.active_org?.id === app?.reference_org) || app?.contributors?.includes(userdata?.id) || creatorProfile?.self === true ?
				<Tooltip title="Edit App" placement="top">
					<Button
						variant="outlined"
						component="label"
						color="secondary"
						onClick={() => {
							navigate(`/apps/edit/${appId}`)
						}}
						style={{ height: 40, marginTop: 5, marginLeft: 5, }}
					>
						<EditIcon style={{marginRight: 10, }}/> Edit 
					</Button>
				</Tooltip>
  			: isMobile || !isLoggedIn ? null : 
				<Tooltip title="Fork this app to edit it for yourself" placement="top">
					<Button
						variant="outlined"
						component="label"
						color="secondary"
						onClick={() => {
							navigate(`/apps/new?id=${appId}`)
						}}
						style={{ height: 40, marginTop: 5, marginLeft: 5, }}
					>
						<ForkRightIcon style={{marginRight: 10, }}/> Fork
					</Button>
				</Tooltip>
          }

          {appType === 0 || appType === 2 ? (
			<div style={{display: "flex", alignItems: 'center',gap: 10 }}>
				<a
				  rel="noopener noreferrer"
				  href={`/apis/${app.id}`}
				  target="_blank"
				  style={{ textDecoration: "none", color: "#f85a3e", }}
				>
				  <Button
					variant="outlined"
					color="secondary"
			  		style={{ height: 40, marginTop: 5, marginLeft: 5, }}
				  >
  					<OpenInNewIcon style={{marginRight: 5, }}/>
					Explore API
				  </Button>
				</a>
                <Select
                  value={sharingConfiguration}
			  	  disabled={!isCloud}
                  onChange={(event) => {
                    if ((appdata.owner !== userdata.id) && (!userdata.support)) {
                      toast("You're not the owner of this app. You can't update it.");
                      return;
                    }
                    setSharingConfiguration(event.target.value);
                    if (event.target.value === "you") {
                      toast("Changing sharing to " + event.target.value);
                      updateAppField(appdata.id, "sharing", false);
                    } else if (
                      event.target.value === "everyone" ||
                      event.target.value === "public"
                    ) {
  
                    if (!isCloud) {
                        setPublishModalOpen(true)
                    } else {
                        updateAppField(appdata.id, "sharing", true);
                      }
                    } else {
                      console.log(
                        "Can't handle value for sharing: ",
                        event.target.value
                      );
                    }
                  }}
                  style={{
                    width: 150,
                    backgroundColor: theme.palette.backgroundColor,
                    color: theme.palette.text.primary,
                    height: 40,
                    marginTop: 5
                  }}
                  SelectDisplayProps={{
                    style: {
                      marginLeft: 10,
                      display: 'flex'
                    },
                  }}
                >
                  {userRoles.map((data) => {
                    return (
                      <MenuItem
                        key={data}
                        sx={{ backgroundColor: inputColor, color: theme.palette.text.primary, display: 'flex', "&:hover": { backgroundColor: theme.palette.hoverColor } }}
                        value={data}
                      >
                        {data}
                      </MenuItem>
                    );
                  })}
                </Select>
			</div>
          ) : (
            <a
              rel="noopener noreferrer"
              href={"https://shuffler.io/docs/app_creation#python---building-apps-manually"}
              target="_blank"
              style={{ textDecoration: "none", color: "#f85a3e" }}
            >
              <img
                src={"/images/frameworks/python.jpeg"}
                alt="Python integration for Shuffle"
                id="logo"
                style={{
                  marginTop: 5,
                  marginLeft: 15,
                  height: 35,
                  borderRadius: theme.palette?.borderRadius,
                }}
              />
            </a>
          )}
        </div>
      </div>
      <div
        style={{ display: "flex", flexDirection: isMobile ? "column" : "row" }}
      >
        <Paper style={boxStyle}>
          <div
            style={{
              color: "white",
              flex: 1,
              display: "flex",
              flexDirection: "row",
            }}
          >
            <div
              style={{
                flex: 1,
                margin: 10,
                cursor: "pointer",
                backgroundColor: inputColor,
                maxWidth: height,
                maxHeight: height,
              }}
              onClick={() => {
                upload.click();
              }}
            >
              {imageInfo}
            </div>
            <div style={{ marginLeft: 15, color: "white" }}>
							<div style={{display: "flex", marginTop: 5, }}>
              	<Typography variant="h6" style={{  }}>
									{name}
								</Typography>
                <span style={{ marginTop: "auto", marginBottom: "auto" }}>
                  {(app.public || appType === 0) && app.skipped_build == false ? (
                    <Tooltip title="This app is verified" placement="top">
                      <VerifiedUserIcon style={{marginLeft: 10, }} />
                    </Tooltip>
                  ) : (
                    <Tooltip
                      title="This app may not work, and can't be tested yet"
                      placement="top"
                    >
                      <WarningIcon />
                    </Tooltip>
                  )}
                </span>

								{/* Handles category changing, but looks like shit. Should probably work as a suggestion */}
								{/*
								<Select
									onChange={(e) => {
										console.log("Changed: ", e.target.value)
          					setNewWorkflowCategories([e.target.value]);
									}}
        					value={newWorkflowCategories.length === 0 ? "Select a category" : newWorkflowCategories[0]}
        					style={{ 
										flexAlign: "right",
										color: "white", 
										height: 40,
										width: 150,
										borderRadius: 20,
										marginLeft: 200, 
									}}
								>
									{categories.map((category, categoryIndex) => {
										if (category === undefined || category === null || category === "") {
											return null
										}

										return (
											<MenuItem
												key={categoryIndex}
												value={category}
												style={{ 
												}}
											>
												{category.name}
											</MenuItem>
										)
									})}
								</Select>
								*/}
              </div>
              <div style={{ marginTop: 5 }}>
                <Typography variant="body1" color="textSecondary">
                 Version - {app?.app_version}
                </Typography>
              </div>
              <div style={{ marginTop: 5 }} />
              {Object.getOwnPropertyNames(creatorProfile).length !== 0 &&
				  creatorProfile.github_avatar !== undefined &&
				  creatorProfile.github_avatar !== null ? (
                <div style={{ display: "flex" }}>
                  <IconButton
                    color="primary"
                    style={{ padding: 0, marginRight: 10 }}
                    aria-controls="simple-menu"
                    aria-haspopup="true"
                    onClick={(event) => {
                      setAnchorElAvatar(event.currentTarget);
                    }}
                  >
                    <Link
                      to={`/creators/${creatorProfile.github_username}`}
                      style={{ textDecoration: "none", color: "#f86a3e" }}
                    >
                      <Avatar
                        style={{ height: 30, width: 30 }}
                        alt={contact.name}
                        src={creatorProfile.github_avatar}
                      />
                    </Link>
                  </IconButton>
                  <Typography
                    variant="body1"
                    color="textSecondary"
                    style={{ color: "" }}
                  >
                    Shared by{" "}
                    <Link
                      to={`/creators/${creatorProfile.github_username}`}
                      style={{ textDecoration: "none", color: "#f86a3e" }}
                    >
                      {creatorProfile.github_username}
                    </Link>
                    <Button
                      style={{
                        borderRadius: 25,
                        fontSize: 11,
                        color: theme.palette.text.primary,
                        backgroundColor: theme.palette.platformColor,
                        border: "1px solid #ddf4e1",
                        textTransform: "none",
                        marginLeft: 4,
                        padding: 1,
                      }}
                      onClick={() => {
                        ReactGA.event({
                          category: "hiring_button",
                          action: `${creatorProfile.github_username}_app_click`,
                          label: name,
                        });

                        if (window.drift !== undefined) {
                          window.drift.api.startInteraction({
                            interactionId: 342345,
                          });
                        } else {
                          console.log(
                            "Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ",
                            window.drift
                          );
                          toast(
                            `Thanks for showing interest in getting help from ${creatorProfile.github_username}`
                          );
                        }
                      }}
                    >
                      Get help
                    </Button>
				{contact.name !== undefined &&
                    contact.name !== null &&
                    !contact.name.includes("frikky") &&
                    contact.name.length > 0 &&
                    contact.name.toLowerCase() !==
                      creatorProfile.github_username.toLowerCase() &&
                    !(
                      contact.name.toLowerCase().includes("anon") &&
                      creatorProfile.github_username.length > 0
                    ) ? (
                      <span style={{ marginLeft: 15 }}>
                        {" "}
                        •&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Created by {contact.name}
                      </span>
                    ) : (
                      ""
                    )}
                  </Typography>
                </div>
              ) : contact.name !== undefined &&
                contact.name !== null &&
                contact.name.length > 0 ? (
                <Typography
                  variant="body1"
                  color="textSecondary"
                  style={{ color: "" }}
                >
                  Created by {contact.name}
                </Typography>
              ) : null}
              <div
                style={{
                  marginTop: 5,
                  minHeight: 30,
                  maxHeight: 30,
                  overflow: "hidden",
                }}
              >
                {newWorkflowTags.map((tag, index) => {
                  return (
                    <Chip
                      key={index}
                      style={chipStyle}
                      variant="outlined"
                      label={tag}
                      color="primary"
                    />
                  );
                })}
              </div>
            </div>
          </div>
        </Paper>
        {isMobile || serverside ? null : (
          <Card
          style={{
            flex: 1,
            margin: 10,
            backgroundColor: boxStyle.backgroundColor,
            color: "white",
            textAlign: "center",
          }}
          sx={{
            "&:hover": {
              backgroundColor: theme.palette.hoverColor,
            },
          }}
        >
          <CardActionArea
            component={Link}
            to={"/search?tab=workflows&q=" + name.split(" ")[0]}
            style={{ height: "100%" }}
          >
            <div style={{ padding: "50px 0" }}>
              <Typography variant="h4">
                {relatedWorkflows !== 0 ? (
                  relatedWorkflows
                ) : (
                  <InstantSearch
                    searchClient={searchClient}
                    indexName="workflows"
                  >
                    <CustomSearchBox defaultRefinement={name.split(" ")[0]} />
                    <CustomWorkflowHits />
                  </InstantSearch>
                )}
              </Typography>
              <Typography
                variant="h6"
                color="textSecondary"
                style={{ marginTop: 5 }}
              >
                Workflows
              </Typography>
            </div>
          </CardActionArea>
        </Card>
        
        )}
        {app.video !== undefined &&
        app.video !== null &&
        app.video.includes("http") ? (
          <div style={{ margin: 10 }}>
            {app.video.includes("loom.com/share") &&
            app.video.split("/").length > 4 ? (
              <div>
                <iframe
                  src={`https://www.loom.com/embed/${app.video.split("/")[4]}`}
                  frameBorder={false}
                  webkitallowFullscreen={true}
                  mozallowFullscreen={true}
                  allowFullScreen={true}
                  style={{
                    marginTop: 15,
                    top: 0,
                    left: 0,
                    maxWidth: 230,
                    minWidth: 230,
                  }}
                />
              </div>
            ) : app.video.includes("youtube.com") &&
              app.video.split("/").length > 3 &&
              app.video.includes("v=") ? (
              <div>
                <iframe
                  src={`https://www.youtube.com/embed/${new URL(
                    app.video
                  ).searchParams.get("v")}`}
                  frameBorder={false}
                  webkitallowFullscreen={true}
                  mozallowFullscreen={true}
                  allowFullScreen={true}
                  style={{
                    top: 0,
                    left: 0,
                    maxWidth: 230,
                    minWidth: 230,
                  }}
                />
              </div>
            ) : (
              <Typography variant="body1">{app.video}</Typography>
            )}
          </div>
        ) : isMobile || serverside ? null : (
          <Card
            style={{
              flex: 1,
              margin: 10,
              backgroundColor: boxStyle.backgroundColor,
              color: "white",
              textAlign: "center",
            }}
            sx={{
              "&:hover": {
                backgroundColor: theme.palette.hoverColor,
              },
            }}
          >
            <CardActionArea
              component={Link}
              to={"/search?tab=apps&q=" + name.split(" ")[0]}
              style={{
                height: "100%",
              }}
            >
              <div style={{ padding: "50px 0" }}>
                <Typography variant="h4">
                  {relatedApps !== 0 ? (
                    relatedApps
                  ) : (
                    <InstantSearch
                      searchClient={searchClient}
                      indexName="appsearch"
                    >
                      <CustomSearchBox defaultRefinement={name.split(" ")[0]} />
                      <CustomAppHits />
                    </InstantSearch>
                  )}
                </Typography>
                <Typography
                  variant="h6"
                  color="textSecondary"
                  style={{ marginTop: 5 }}
                >
                  Related apps
                </Typography>
              </div>
            </CardActionArea>
          </Card>

        )}
      </div>
      <div>
        <div style={{}}>{actionView}</div>
        {errorCode.length > 0 ? `Error: ${errorCode}` : null}
      </div>
    </div>
  );
  const loadedCheck =
    (isLoaded && isAppLoaded) || serverside === true ? (
      <div>
        {serverside === true ? (
          <div style={bodyDivStyle}>{landingpageDataBrowser}</div>
        ) : (
          <Fade
            in={true}
            timeout={1000}
            style={{ transitionDelay: `${150}ms` }}
          >
            <div style={bodyDivStyle}>{landingpageDataBrowser}</div>
          </Fade>
        )}
        <TextField
          id="copy_element_shuffle"
          value={to_be_copied}
          style={{ display: "none" }}
        />
      </div>
    ) : (
      <div>
		{serverside === true ? null : 
        	<div style={{ margin: "auto", textAlign: "center", width: 250 }}>
				<CircularProgress
					style={{
						marginTop: "27vh",
						minHeight: 35,
						maxHeight: 35,
						minWidth: 35,
						maxWidth: 35, 
						marginLeft: "auto",
						marginRight: "auto",
					}}
				/>
				<Typography variant="body1" color="textSecondary">
					Loading App
				</Typography>
			</div>
				}
      </div>
    );

  return <div style={{ marginLeft: !isLoggedIn || !isLoaded ? 0 : leftSideBarOpenByClick ? 280 : 80, transition: 'margin-left 0.3s ease'}}>{loadedCheck}</div>;
};
export default AppExplorer;