import React, { memo, useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router';

import {
  Dialog,
  DialogTitle,
  DialogContent,
  IconButton,
  Typography,
  Box,
  Button,
  Stack,
  Avatar,
  Skeleton,
  Tooltip,
} from '@mui/material';

import CloseIcon from '@mui/icons-material/Close';
import EditIcon from '@mui/icons-material/Edit';
import Search from '@mui/icons-material/Search';
import AddIcon from '@mui/icons-material/Add';
import ForkRightIcon from '@mui/icons-material/ForkRight';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import LaunchIcon from '@mui/icons-material/Launch';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { CloudDownloadOutlined, Delete } from '@mui/icons-material';
import { findSpecificApp } from '../components/AppFramework.jsx';
import theme from "../theme.jsx";
import YAML from 'yaml';
import { toast } from 'react-toastify';
import { Link } from 'react-router-dom';
import { InstantSearch, connectHits, connectSearchBox } from 'react-instantsearch-dom';
import algoliasearch from "algoliasearch/lite";

const searchClient = algoliasearch(
  "JNSS5CFDZZ",
  "db08e40265e2941b9a7d8f644b6e5240"
);;

const AppModal = ({ open, onClose, app, globalUrl, getApps}) => {

  const [frameworkData, setFrameworkData] = useState({})
  const [userdata, setUserdata] = useState({})
  const [usecases, setUsecases] = useState([])
  const [workflows, setWorkflows] = useState([])
  const [prevSubcase, setPrevSubcase] = useState({})
  const [inputUsecase, setInputUsecase] = useState({})
  const [latestUsecase, setLatestUsecase] = useState([])
  const [foundAppUsecase, setFoundAppUsecase] = useState({})
  const [usecaseLoading, setUsecaseLoading] = useState(false)
  const [deleteModalOpen, setDeleteModalOpen] = useState(false)
  const [sharingConfiguration, setSharingConfiguration] = React.useState("you");
  const navigate = useNavigate();
  const parseUsecase = (subcase) => {
    const srcdata = findSpecificApp(frameworkData, subcase.type)
    const dstdata = findSpecificApp(frameworkData, subcase.last)

    if (srcdata !== undefined && srcdata !== null) {
      subcase.srcimg = srcdata.large_image
      subcase.srcapp = srcdata.name
    }

    if (dstdata !== undefined && dstdata !== null) {
      subcase.dstimg = dstdata.large_image
      subcase.dstapp = dstdata.name
    }
    return subcase
  }

  useEffect(() => {
    var baseurl = globalUrl;
    fetch(baseurl + "/api/v1/me", {
      credentials: "include",
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(response => response.json())
      .then(responseJson => {
        if (responseJson.success) {
          setUserdata(responseJson)
        }
      })
      .catch(error => {
        console.log("Failed login check: ", error);
      });
  }, [app]);

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

        return response.json();
      })
      .then((responseJson) => {
        if (responseJson.success === false) {
          const preparedData = {
            "siem": findSpecificApp({}, "SIEM"),
            "communication": findSpecificApp({}, "COMMUNICATION"),
            "assets": findSpecificApp({}, "ASSETS"),
            "cases": findSpecificApp({}, "CASES"),
            "network": findSpecificApp({}, "NETWORK"),
            "intel": findSpecificApp({}, "INTEL"),
            "edr": findSpecificApp({}, "EDR"),
            "iam": findSpecificApp({}, "IAM"),
            "email": findSpecificApp({}, "EMAIL"),
          }

          setFrameworkData(preparedData)
        } else {
          setFrameworkData(responseJson)
        }
      })
      .catch((error) => {
        console.log("Error getting framework: ", error)
      })
  }

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

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


        const newUsecases = [...usecases]
        newUsecases.forEach((category, index) => {
          category.list.forEach((subcase, subindex) => {
            getUsecase(subcase, index, subindex)
          })
        })

        setLatestUsecase(newUsecases)
        if (newUsecases?.length > 0) {
          const foundCategory = newUsecases?.find((category) =>
            category?.list?.some((subcase) => subcase?.srcapp === app?.name || subcase?.dstapp === app?.name)
          );
    
          const foundSubcase = foundCategory?.list?.find(
            (subcase) => subcase?.srcapp === app?.name || subcase?.dstapp === app?.name
          );
    
          setFoundAppUsecase(foundSubcase);
        }
        setUsecaseLoading(false)

        // Matching workflows with usecases
        if (responseJson.success !== false) {
          if (workflows !== undefined && workflows !== null && workflows.length > 0) {
            var categorydata = responseJson

            var newcategories = []
            for (var key in categorydata) {
              var category = categorydata[key]
              category.matches = []

              for (var subcategorykey in category.list) {
                var subcategory = category.list[subcategorykey]
                subcategory.matches = []

                for (var workflowkey in workflows) {
                  const workflow = workflows[workflowkey]

                  if (workflow.usecase_ids !== undefined && workflow.usecase_ids !== null) {
                    for (var usecasekey in workflow.usecase_ids) {
                      if (workflow.usecase_ids[usecasekey].toLowerCase() === subcategory?.name?.toLowerCase()) {

                        category.matches.push({
                          "workflow": workflow.id,
                          "category": subcategory?.name,
                        })

                        subcategory.matches.push(workflow)
                        break
                      }
                    }
                  }

                  if (subcategory.matches.length > 0) {
                    break
                  }
                }
              }

              newcategories.push(category)
            }

            if (newcategories !== undefined && newcategories !== null && newcategories.length > 0) {
              setUsecases(newcategories)
            } else {
              setUsecases(responseJson)
            }
          } else {
            setUsecases(responseJson)
          }
        }
      })
      .catch((error) => {
        //toast("ERROR: " + error.toString());
        console.log("ERROR: " + error.toString());
      });
  };

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

        return response.json();
      })
      .then((responseJson) => {
        fetchUsecases(responseJson)

        if (responseJson !== undefined) {
          setWorkflows(responseJson);
        }
      })
      .catch((error) => {
        fetchUsecases()
        //toast(error.toString());
      });
  }

  const getUsecase = (subcase, index, subindex) => {
	//console.log("Skipping getUsecase")
	// FIXME: Skipping for now as this screws over a lot of the prioritization system
	// due to them having "looked at" the usecase.
	return 

    subcase = parseUsecase(subcase)
    setPrevSubcase(subcase)

    fetch(`${globalUrl}/api/v1/workflows/usecases/${escape(subcase?.name?.replaceAll(" ", "_"))}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          console.log("Status not 200 for framework!");
        }

        return response.json();
      })
      .then((responseJson) => {
        var parsedUsecase = responseJson

        if (responseJson.success === false) {
          parsedUsecase = subcase
        } else {
          parsedUsecase = responseJson

          parsedUsecase.srcimg = subcase.srcimg
          parsedUsecase.srcapp = subcase.srcapp
          parsedUsecase.dstimg = subcase.dstimg
          parsedUsecase.dstapp = subcase.dstapp
        }
        // Look for the type of app and fill in img1, srcapp...
        setInputUsecase(parsedUsecase)
      })
      .catch((error) => {
        //toast(error.toString());
        setInputUsecase(subcase)
        console.log("Error getting usecase: ", error)
      })
  }

  useEffect(() => {
    setUsecaseLoading(true)
    getAvailableWorkflows()
    getFramework()
    handleUpdateSharingConfiguration()
  }, [app])

  const handleUpdateSharingConfiguration = useCallback(() => {
    if (app?.sharing === true) {
      setSharingConfiguration("public")
    }else {
      setSharingConfiguration("you")
    }

  }, [app?.id])

  const deleteApp = (appId) => {
      toast("Attempting to delete app");
      fetch(globalUrl + "/api/v1/apps/" + appId, {
        method: "DELETE",
        headers: {
          Accept: "application/json",
        },
        credentials: "include",
      })
        .then((response) => {
          if (response.status === 200) {
            toast("Successfully deleted app");
            setTimeout(() => {
              //delete apps from local storage
              localStorage.removeItem("apps");
              getApps();
              onClose();
            }, 1000);
          } else {
            toast("Failed deleting app. Does it still exist?");
          }
        })
        .catch((error) => {
          toast(error.toString());
        });
    };

  const deleteModal = deleteModalOpen ? (
      <Dialog
        open={deleteModalOpen}
        onClose={() => {
          setDeleteModalOpen(false);
        }}
        PaperProps={{
          sx: {
            borderRadius: theme?.palette?.DialogStyle?.borderRadius,
            border: theme?.palette?.DialogStyle?.border,
            fontFamily: theme?.typography?.fontFamily,
            backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
            zIndex: 1000,
            minWidth: "500px",
            overflow: "hidden",
            '& .MuiDialogContent-root': {
              backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
            },
            '& .MuiDialogTitle-root': {
              backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
            },
          }
        }}
      >
        <DialogTitle>
          <div style={{ textAlign: "center", color: "rgba(255,255,255,0.9)" }}>
            Are you sure? <div />
            Some workflows may stop working.
          </div>
        </DialogTitle>
        <DialogContent
          style={{ color: "rgba(255,255,255,0.65)", textAlign: "center" }}
        >
          <Button
            style={{}}
            onClick={() => {
              deleteApp(app.id);
              setDeleteModalOpen(false);
            }}
            color="primary"
          >
            Yes
          </Button>
          <Button
            variant="outlined"
            style={{marginLeft: 5}}
            onClick={() => {
              setDeleteModalOpen(false);
            }}
            color="primary"
          >
            No
          </Button>
        </DialogContent>
      </Dialog>
    ) : null;


  const downloadApp = (inputdata) => {
    const id = inputdata.id;

    toast("Downloading..");
    fetch(globalUrl + "/api/v1/apps/" + id + "/config", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      credentials: "include",
    })
      .then((response) => {
        if (response.status !== 200) {
          window.location.pathname = "/apps";
        }

        return response.json();
      })
      .then((responseJson) => {
        if (!responseJson.success) {
          toast("Failed to download file");
        } else {
          console.log(responseJson);
          const basedata = atob(responseJson.openapi);
          console.log("BASE: ", basedata);
          var inputdata = JSON.parse(basedata);
          console.log("POST INPUT: ", inputdata);
          inputdata = JSON.parse(inputdata.body);

          const newpaths = {};
          if (inputdata["paths"] !== undefined) {
            Object.keys(inputdata["paths"]).forEach(function (key) {
              newpaths[key.split("?")[0]] = inputdata.paths[key];
            });
          }

          inputdata.paths = newpaths;
          console.log("INPUT: ", inputdata);
          var name = inputdata.info.title;
          name = name.replace(/ /g, "_", -1);
          name = name.toLowerCase();

          delete inputdata.id;
          delete inputdata.editing;

          const data = YAML.stringify(inputdata);
          var blob = new Blob([data], {
            type: "application/octet-stream",
          });

          var url = URL.createObjectURL(blob);
          var link = document.createElement("a");
          link.setAttribute("href", url);
          link.setAttribute("download", `${name}.yaml`);
          var event = document.createEvent("MouseEvents");
          event.initMouseEvent(
            "click",
            true,
            true,
            window,
            1,
            0,
            0,
            0,
            0,
            false,
            false,
            false,
            false,
            0,
            null
          );
          link.dispatchEvent(event);
          //link.parentNode.removeChild(link)
        }
      })
      .catch((error) => {
        console.log(error);
        toast(error.toString());
      });
  };

  const isCloud =
    window.location.host === "localhost:3002" ||
      window.location.host === "shuffler.io"
      ? true
      : false;

  var newAppname = app?.name;
  if (newAppname === undefined) {
    newAppname = "Undefined";
  } else {
    newAppname = newAppname.charAt(0).toUpperCase() + newAppname.substring(1);
    newAppname = newAppname?.replaceAll("_", " ");
  }


  var canEditApp = userdata?.support || 
                   userdata?.id === app?.owner || 
                   (userdata?.admin === "true" && userdata?.active_org?.id === app?.reference_org) || 
                   app?.contributors?.includes(userdata?.id)
  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
      PaperProps={{
        sx: {
          borderRadius: 2,
          border: "1px solid #494949",
          minWidth: '440px',
          fontFamily: theme?.typography?.fontFamily,
          backgroundColor: "#212121",
          '& .MuiDialogContent-root': {
            backgroundColor: "#212121",
          },
          '& .MuiDialogTitle-root': {
            backgroundColor: "#212121",
          },
          '& .MuiTypography-root': {
            fontFamily: theme?.typography?.fontFamily,
          },
          '& .MuiButton-root': {
            fontFamily: theme?.typography?.fontFamily,
          },
        }
      }}
    >
      {deleteModal}
      <DialogTitle
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          pb: 2,
          pt: 2,
          pl: 3,
          pr: 2,
          fontFamily: theme?.typography?.fontFamily
        }}
      >
	  	{/*
        <Typography component="div" sx={{ fontWeight: 500, color: "#F1F1F1", fontSize: "20px" }}>
          About {app?.name.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}
        </Typography>
		*/}
        <IconButton
          onClick={onClose}
          sx={{
            color: 'rgba(255, 255, 255, 0.7)',
            '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.1)' }
          }}
	  	  style={{
			  position: "absolute",
			  top: 10,
			  right: 10, 
		  }}
        >
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent sx={{ py: 3, px: 3 }}>
        <Box sx={{ display: 'flex', alignItems: 'space-between', justifyContent: 'space-between' }}>

          <div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: theme?.typography?.fontFamily }}>
            <img
              alt={app?.name}
              src={app?.large_image || app?.image_url || "/images/no_image.png"}
              style={{
                borderRadius: 4,
                maxWidth: 100,
                minWidth: 100,
                maxHeight: "100%",
                display: "block",
                margin: "0 auto",
                boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.2)"
              }}
            />
            <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", paddingLeft: 8, }}>
              <div style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
              }}>
	  			<a href={isCloud ? "/apps/" + (app?.id || app?.objectID) : `https://shuffler.io/apps/${app?.objectID || app?.id}`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "rgba(255,255,255,0.9)", }}>
					<Typography variant="h5" component="div" sx={{ fontWeight: 600 }}>
					  {newAppname}
					</Typography>
	  			</a>
                <Link
                  to={isCloud ? `/apps/${app?.id || app?.objectID}` : `/apps/${app?.id || app?.published_id || app?.objectID}`}
                  style={{ textDecoration: "none", color: "#f85a3e", marginTop: "-2px" }}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <IconButton
                    style={{
                      color: "#f85a3e",
                      fontSize: 16,
                    }}
                  >
                    <OpenInNewIcon />
                  </IconButton>
                </Link>
              </div>
              <Typography
                variant="body2"
                color="textSecondary"
              >
                {app?.categories ? app.categories.join(", ") : "Communication"}
              </Typography>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", gap: 10 }}>

            {app?.activated &&
              app?.private_id !== undefined &&
              app?.private_id?.length > 0 &&
              app?.generated ? (
              <Tooltip title="Download OpenAPI"
                placement="top"
                arrow
                sx={{
                  fontFamily: theme?.typography?.fontFamily
                }}
              >
                <Button
                  variant="contained"
                  sx={{
                    bgcolor: '#494949',
                    '&:hover': { bgcolor: '#494949' },
                    textTransform: 'none',
                    borderRadius: 1,
                    minWidth: '45px',
                    width: '45px',
                    height: '40px',
                    padding: 2,
                    color: "#fff",
                    fontFamily: theme?.typography?.fontFamily
                  }}
                  onClick={(event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    downloadApp(app);
                  }}
                >
                  <CloudDownloadOutlined />
                </Button>
              </Tooltip>
            ) : null}
            {(userdata?.id === app?.owner)? (
              <Tooltip title={"Delete app (confirm box will show)"}> 
              <Button
                variant="outlined"
                component="label"
                color="primary"
                sx={{
                  bgcolor: '#494949',
                  '&:hover': { bgcolor: '#494949', border: 'none' },
                  textTransform: 'none',
                  borderRadius: 1,
                  minWidth: '45px',
                  width: '45px',
                  height: '40px',
                  padding: 2,
                  color: "#fff",
                  fontFamily: theme?.typography?.fontFamily,
                  border: 'none'
                }}
                onClick={() => {
                  setDeleteModalOpen(true);
                }}
                disabled={(sharingConfiguration === undefined || sharingConfiguration === null || sharingConfiguration === "public") }
              >
                <Delete />
              </Button>
            </Tooltip>
            ): null}
            
            {(canEditApp && app?.generated) && (
            <Button
              variant="contained"
              sx={{
                bgcolor: "#494949",
                '&:hover': { bgcolor: '#494949' },
                textTransform: 'none',
                borderRadius: 1,
                py: 1,
                px: 3,
                height: '40px',
                color: "#fff",
                fontFamily: theme?.typography?.fontFamily
              }}
              startIcon={canEditApp ? <EditIcon /> : <ForkRightIcon />}
              onClick={() => {
                if (canEditApp) {
                  const editUrl = "/apps/edit/" + (app?.id || app?.objectID);
                  navigate(editUrl)
                } else {
                  const forkUrl = "/apps/new?id=" + (app?.id || app?.objectID);
                  navigate(forkUrl)
                }
              }}
            >
                {canEditApp ? "Edit" : "Fork"}
              </Button>
            )}
          </div>
        </Box>

        <div style={{
          display: "flex",
          justifyContent: "space-between",
          fontFamily: theme?.typography?.fontFamily,
          padding: "26px 0px"
        }}>
          <div style={{
            textAlign: "start",
            flex: 1,
          }}>
            <WorkflowCard app={app}/>
            <Typography
              variant="body2"
              sx={{
                color: 'rgba(255, 255, 255, 0.7)',
                fontFamily: theme?.typography?.fontFamily,
                fontSize: '14px'
              }}
            >
              Public Workflow
            </Typography>
          </div>
          <div style={{
            flex: 1,
            textAlign: "start",
            borderLeft: "1px solid rgba(255, 255, 255, 0.12)",
            paddingLeft: "10px",
            height: "100%",
          }}>
            <Typography variant="h6"
              sx={{
                fontWeight: 600,
                mb: 0.3,
                color: '#fff'
              }}>
              {Array.isArray(app?.actions) ? app.actions.length : app?.actions}
            </Typography>
            <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
              Actions
            </Typography>
          </div>
          <div style={{
            borderLeft: "1px solid rgba(255, 255, 255, 0.12)",
            flex: 1,
            paddingLeft: "10px",
            paddingTop: "5px"
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: "5px", fontFamily: theme?.typography?.fontFamily, fontSize: "14px", fontWeight: 600, color: 'white' }}>
              {
                app?.collection ? (
                  <>
                    <CheckCircleIcon sx={{ color: '#4CAF50' }} />
                    <Typography variant="body1" sx={{
                      fontWeight: 500,
                      color: '#fff',
                      marginTop: "1px",
                      fontFamily: theme?.typography?.fontFamily,
                      fontSize: "16px"
                    }}>
                      app.collection

                    </Typography>
                  </>
                ) : (
                  <Typography sx={{
                    fontSize: "16px",
                    fontWeight: 500,
                    marginTop: "1px",
                    color: 'rgba(255, 255, 255, 0.7)',
                    fontFamily: theme?.typography?.fontFamily
                  }}>
                    No collection yet
                  </Typography>
                )
              }

            </div>
            <Typography variant="body2" sx={{ color: 'rgba(158, 158, 158, 1)' }}>
              Part of a collection
            </Typography>
          </div>
        </div>

        <div style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "start",
          width: "100%"
        }}>
          {usecaseLoading ? (
            <Skeleton 
              variant="text" 
              width="55%" 
              sx={{ 
                fontSize: "16px",
                mb: "16px",
              }} 
            />
          ) : (
            <div style={{
              fontFamily: theme?.typography?.fontFamily,
              fontSize: "16px",
              color: "#fff",
              marginBottom: "16px",
              fontWeight: 600
            }}>
              {/*
                (foundAppUsecase?.srcapp !== undefined && foundAppUsecase?.dstapp !== undefined) ? (
                  "Connect " + foundAppUsecase?.srcapp?.replaceAll("_", " ") + " to " + foundAppUsecase?.dstapp?.replaceAll("_", " ")
                ) : (
                  "Connect " + app?.name.replaceAll("_", " ") + " to any tool"
                )
              */}
            </div>
          )}

          <Box sx={{
            bgcolor: '#2F2F2F',
            p: 2,
            borderRadius: 2,
            display: 'flex',
            alignItems: 'center',
            mb: 3
          }}>
            {/*usecaseLoading ? (
              <Stack direction="row" spacing={2} alignItems="center" sx={{ width: '100%' }}>
                <Stack direction="row" spacing={-1}>
                  <Skeleton variant="circular" width={32} height={32} />
                  <Skeleton variant="circular" width={32} height={32} />
                </Stack>
                <Skeleton variant="text" sx={{ flexGrow: 1 }} width={200} />
              </Stack>
            ) : (
              <>
                <Stack direction="row" spacing={-1}>
                  {foundAppUsecase?.srcapp === undefined ? (
                    <Avatar sx={{ width: 32, height: 32, bgcolor: 'background.paper', border: 1, borderColor: 'divider' }} src={app?.image_url || app?.large_image}>
                    </Avatar>
                  ) : (
                    <Avatar
                      src={foundAppUsecase?.srcimg}
                      sx={{
                        width: 32,
                        height: 32,
                        bgcolor: 'background.paper',
                        border: 1,
                        borderColor: 'divider',
                        zIndex: 10
                      }}
                    />
                  )}
                  {foundAppUsecase?.dstapp === undefined ? (
                    <Avatar sx={{ width: 32, height: 32, bgcolor: 'background.paper', border: 1, borderColor: 'divider' }}>
                      <AddIcon sx={{ color: 'text.primary', zIndex: 10, fontSize: 18 }} />
                    </Avatar>
                  ) : (
                    <Avatar
                      src={foundAppUsecase?.dstimg}
                      sx={{
                        width: 32,
                        height: 32,
                        bgcolor: 'background.paper',
                        border: 1,
                        borderColor: 'divider',
                        zIndex: 10
                      }}
                    />
                  )}
                </Stack>
                <Typography sx={{ ml: 2, fontSize: "16px", letterSpacing: "0.5px" }}>
                  {foundAppUsecase?.name || "Search for a Usecase"}
                </Typography>
              </>
            )*/}
          </Box>
        </div>

        <div style={{ display: "flex", justifyContent: "center", fontFamily: theme?.typography?.fontFamily }}>
          <Button
            variant="contained"
            sx={{
              bgcolor: '#FF8544',
              '&:hover': { bgcolor: '#FF8544' },
              textTransform: 'none',
              borderRadius: "4px",
              py: 1,
              px: 7,
              fontSize: "14px",
              letterSpacing: "0.5px",
              color: "black",
              fontFamily: theme?.typography?.fontFamily,
              minWidth: '200px'
            }}
            onClick={() => {
              navigate("/usecases")
            }}
            disabled={usecaseLoading}
          >
            {
              (foundAppUsecase !== undefined && foundAppUsecase !== null && usecaseLoading === false) ? "See usecase" : "Find a Usecase"
            }
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default AppModal;


const WorkflowCard = memo(({ app }) => {
  const [name, setName] = useState("");
  const [relatedWorkflows, setRelatedWorkflows] = useState(0);

  const WorkflowHits = ({ hits }) => {
    useEffect(() => {
      setRelatedWorkflows(hits?.length || 0);
    }, [hits]);

    return null;
  };

  const CustomWorkflowHits = connectHits(WorkflowHits);

  const SearchBox = ({ refine, currentRefinement }) => {
    useEffect(() => {
      if (name.length > 0 && currentRefinement !== name) {
        refine(name?.split(" ")[0]);
      }
    }, [name, refine, currentRefinement]);

    return null;
  };

  const CustomSearchBox = connectSearchBox(SearchBox);

  useEffect(() => {
    if (app?.name && app.name.trim().length > 0 && name !== app.name) {
      const formattedName = app.name
        .charAt(0)
        .toUpperCase() + app.name.substring(1)
        .replaceAll("_", " ");
      setName(formattedName);
    }
  }, [app?.name]);

  return (
    <Typography variant="h4">
      {name.length > 0 ? (
        <InstantSearch key={name} searchClient={searchClient} indexName="workflows">
          <CustomSearchBox defaultRefinement={name?.split(" ")[0]}/>
          <CustomWorkflowHits />
          {relatedWorkflows}
        </InstantSearch>
      ) : (
        relatedWorkflows
      )}
    </Typography>
  );
});