import { red, } from "./views/AngularWorkflow.jsx"

export default function defaultCytoscapeStyle(theme, apps) {
  return [
    {
      selector: "node",
      css: {
        label: function(element) {
        var elementname = element.data("label")
        if (elementname === null || elementname === undefined) {
          return ""
        } 
  
        elementname = elementname.replaceAll("_", " ", -1)
        elementname = elementname.charAt(0).toUpperCase() + elementname.slice(1)
        return elementname
      },
        "text-valign": "center",
      "text-margin-x": function(element) {
        // Attempt at bottom-positioning
        // Required text-valign: bottom
        // FIXME: Disabled for now.
        return "15px"
  
  
  
        const name = element.data("label")
        console.log("Name: ", name)
        if (name === null || name === undefined || name == "" || document=== undefined || document === null) {
          return "0px"
        }
  
        const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d')
  
        context.font = '18px Segoe UI, Tahoma, Geneva, Verdana, sans-serif, sans-serif'
  
        const textWidth = context.measureText(name).width
        return textWidth + "px"
        //return -1*(textWidth) + "px"
      },
  
        "font-family": "Segoe UI, Tahoma, Geneva, Verdana, sans-serif, sans-serif",
        "font-weight": "lighter",
        "font-size": "18px",
        "margin-right": "10px",
        width: "80px",
        height: "80px",
        color: theme.palette.text.primary || "white",
        padding: "10px",
        margin: "5px",
        "border-width": "1px",
        "z-index": 5001,
      },
    },
    {
      selector: "edge",
      css: {
        "target-arrow-shape": "triangle",
        "target-arrow-color": "grey",
        "curve-style": "unbundled-bezier",
        label: "data(label)",
        "text-margin-y": "-15px",
        width: "2px",
        color: theme.palette.text.primary || "white",
        "line-fill": "linear-gradient",
        "line-gradient-stop-positions": ["0.0", "100"],
        "line-gradient-stop-colors": ["grey", "grey"],
        "z-index": 5001,
      },
    },
    {
      selector: `node[buttonType="ACTIONSUGGESTION"]`,
      css: {
        label: "data(label)",
        shape: "roundrectangle",
      "height": "18px",
      "width": "145px",
        "background-color": "#212121",
        "border-color": "#81c784",
        "z-index": 10000,
      "border-radius": "10px",
      "text-margin-x": "0px",
      },
    },
    {
      selector: `node[type="ACTION"]`,
      css: {
        shape: "roundrectangle",
        "background-color": "#213243",
        "border-color": "#81c784",
        "background-width": "100%",
        "background-height": "100%",
        "border-radius": "5px",
        "z-index": 5001,
      },
    },
    {
      selector: `node[type="COMMENT"]`,
      css: {
        label: function (element) {
          return element.data("label")
        },
        shape: "roundrectangle",
        color: "data(color)",
        width: "data(width)",
        height: "data(height)",
        padding: "5px",
        margin: "0px",
        "background-color": "data(backgroundcolor)",
        "background-image": "data(backgroundimage)",
        "border-color": "#ffffff",
        "text-margin-x": "data(textMarginX)",
        "text-margin-y": "data(textMarginY)",
        "z-index": 4999,
        "border-radius": "5px",
        "background-opacity": "0.5",
        "text-wrap": "wrap",
        "text-max-width": "data(width)",
        "text-halign": function(element) {
        const align = element?.data("textHalign")
        if (align === null || align === undefined || align === "") {
          return "center"
        }
  
        return align
      },
        "text-valign": function(element) {
        const align = element?.data("textValign")
        if (align === null || align === undefined || align === "") {
          return "center"
        }
        
        return align
      }
      },
    },
    {
      selector: `node[type="RESIZE-HANDLE"]`,
      css: {
        shape: "ellipse",
        width: "8px",
        height: "8px",
        "border-width": 1,
        "border-color": theme.palette.text.primary || "white",
        "z-index": 5002, 
        "overlay-opacity": 0, 
        "cursor": "nwse-resize",
        "opacity": 0, 
        "pointer-events": "auto", 
      },
    },
    {
      selector: `node[app_name="Integration Framework"]`,
      css: {
        width: "60px",
        height: "60px",
        "z-index": 5000,
  
      //'border-width': 3,
        //'border-color': 'transparent',
      //'border-style': 'solid',
      //'border-gradient': 'linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #8A2BE2)' 
      },
    },
    {
      selector: `node[example="noapp"]`,
      css: {
      // Make background image padding on the left side 20px
        "background-width": "100%",
        "background-height": "100%",
  
        "background-color": "data(iconBackground)",
        "background-fill": "data(fillstyle)",
        "background-gradient-direction": "to-bottom-right",
        "background-gradient-stop-colors": "data(fillGradient)",
      // Change transparency of background
      "background-opacity": "0.3",
      },
    },
    {
      selector: `node[app_name="Shuffle Tools"], node[app_name="email"], node[app_name="http"]`,
      css: {
        width: "35px",
        height: "35px",
        "z-index": 5000,
        "font-size": "0px",
        "background-width": "75%",
        "background-height": "75%",
        "background-color": "data(iconBackground)",
        "background-fill": "data(fillstyle)",
        "background-gradient-direction": "to-right",
        "background-gradient-stop-colors": "data(fillGradient)",
      },
    },
    {
      selector: `node[app_name="Testing"]`,
      css: {
        width: "30px",
        height: "30px",
        "z-index": 5000,
        "font-size": "0px",
      },
    },
    {
      selector: `node[?small_image]`,
      css: {
        "background-image": "data(small_image)",
        "text-halign": "right",
      },
    },
    {
      selector: `node[?large_image]`,
      css: {
        "background-image": "data(large_image)",
        "text-halign": "right",
      },
    },
    {
      selector: `node[type="CONDITION"]`,
      css: {
        shape: "diamond",
        "border-color": "##FFEB3B",
        padding: "30px",
      },
    },
    {
      selector: `node[type="eventAction"]`,
      css: {
        "background-color": "#edbd21",
      },
    },
    {
      selector: `node[type="TRIGGER"]`,
      css: {
        shape: "round-octagon",
        "border-radius": "5px",
        "border-color": "orange",
        "background-color": "#213243",
        "background-width": "100px",
        "background-height": "100px",
      },
    },
    {
      selector: `node[status="running"]`,
      css: {
        "border-color": "#81c784",
      },
    },
    {
      selector: `node[status="stopped"]`,
      css: {
        "border-color": "orange",
      },
    },
    {
      selector: 'node[type="mq"]',
      css: {
        "background-color": "#edbd21",
      },
    },
    {
      selector: "node[?isButton]",
      css: {
        shape: "ellipse",
        width: "15px",
        height: "15px",
        "z-index": "5002",
        "font-size": "0px",
        border: "1px solid rgba(255,255,255,0.9)",
        "background-image": "data(icon)",
        "background-color": "data(iconBackground)",
      },
    },
    {
      selector: "node[?isSuggestion]",
      css: {
        shape: "roundrectangle",
        width: "30px",
        height: "30px",
        "z-index": "5002",
      filter: "grayscale(100%)",
        border: "1px solid rgba(255,255,255,0.9)",
        "background-image": "data(large_image)",
      "background-fit": "cover",
        "font-size": "20px",
        label: "data(label_replaced)",
      },
    },
    {
      selector: "node[?canConnect]",
      css: {
        "border-color": "#f86a3e",
        "border-width": "10px",
        "z-index": "5002",
        "background-color": "#f86a3e",
      },
    },
    {
      selector: "node[?isDescriptor]",
      css: {
        shape: "ellipse",
        "border-color": "#80deea",
        width: "5px",
        height: "5px",
        "z-index": "5002",
        "font-size": "10px",
        "text-valign": "center",
        "text-halign": "center",
        border: "1px solid black",
        "margin-right": "0px",
        "text-margin-x": "0px",
        "background-color": "data(imageColor)",
        "background-image": "data(image)",
      label: "data(label)",
      },
    },
    {
      selector: "node[?isStartNode]",
      css: {
        shape: function(element) {
        return "ellipse" 
      },
        "border-color": "#80deea",
        width: "80px",
        height: "80px",
        "font-size": "18px",
        "background-width": "100%",
        "background-height": "100%",
      },
    },
    {
      selector: `node[app_id="shuffle_agent"]`,
      css: {
      "shape": function(element) {
            return "roundrectangle"
      },
      "height": "74px",
          "width": "222px",
        "background-image": "data(large_image)",
          "label": function(element) {
        var elementname = element.data("label")
        if (elementname === null || elementname === undefined) {
          return ""
        } 
  
        elementname = elementname.replaceAll("_", " ", -1)
  
        if (elementname.length > 15) {
          elementname = elementname.substring(0, 15) + ".."
        }
  
        return elementname
      },
      "background-width": "65px",
      "background-height": "65px",
      "background-position-x": "20px", 
      "background-repeat": "no-repeat",
      "background-opacity": "0.5",
  
      "font-size": "14px",
      "text-halign": "center",
      "text-valign": "center",
          "text-margin-x": "20px",
          "text-margin-y": "0px",
      
      },
    },
    {
      selector: "node[!is_valid]",
      css: {
        "border-color": "#f53434",
        "border-width": "5px",
      },
    },
    {
      selector: ":selected",
      css: {
        "background-color": "#77b0d0",
        "border-color": "#77b0d0",
        "border-width": "20px",
      },
    },
    {
      selector: ".skipped-highlight",
      css: {
        "background-color": "grey",
        "border-color": "grey",
        "border-width": "8px",
        "transition-property": "background-color",
        "transition-duration": "0.5s",
      },
    },
    {
      selector: ".success-highlight",
      css: {
        "background-color": "#02CB70",
        "border-color": "#02CB70",
        "border-width": "5px",
        "transition-property": "background-color",
        "transition-duration": "0.5s",
      },
    },
    {
      selector: ".hover-highlight",
      css: {
        "background-color": "#5f9265",
        "border-color": "#5f9265",
        "border-width": "5px",
        "transition-property": "background-color",
        "transition-duration": "0.5s",
      },
    },
    {
      selector: ".failure-highlight",
      css: {
        "background-color": "#F53434",
        "border-color": "#F53434",
        "border-width": "5px",
        "transition-property": "background-color",
        "transition-duration": "0.5s",
      },
    },
    {
      selector: ".not-executing-highlight",
      css: {
        "background-color": "grey",
        "border-color": "grey",
        "border-width": "5px",
        "transition-property": "#ffef47",
        "transition-duration": "0.25s",
      },
    },
    {
      selector: ".executing-highlight",
      css: {
        //"background-color": "#ffef47",
        "border-color": "#FECC00",
        "border-width": "8px",
        "transition-property": "border-width",
        "transition-duration": "0.25s",
      },
    },
    {
      selector: ".awaiting-data-highlight",
      css: {
        "background-color": "#f4ad42",
        "border-color": "#f4ad42",
        "border-width": "5px",
        "transition-property": "border-color",
        "transition-duration": "0.5s",
      },
    },
    {
      selector: ".shuffle-hover-highlight",
      css: {
        "background-color": "#f85a3e",
        "border-color": "#f85a3e",
        "border-width": "7px",
        "transition-property": "border-width",
        "transition-duration": "0.25s",
        label: "data(label)",
        "font-size": "18px",
        color: theme.palette.text.primary || "white",
      },
    },
    {
      selector: "$node > node",
      css: {
        "padding-top": "10px",
        "padding-left": "10px",
        "padding-bottom": "10px",
        "padding-right": "10px",
      },
    },
    {
      selector: "edge.executing-highlight",
      css: {
        width: "5px",
        "target-arrow-color": "#FECC00",
        "line-color": "#FECC00",
        "transition-property": "line-color, width",
        "transition-duration": "0.25s",
      },
    },
    {
      selector: `edge[?decorator]`,
      css: {
        width: "1px",
        "line-style": "dashed",
        "line-fill": "linear-gradient",
        "target-arrow-color": "#555555",
        "line-gradient-stop-positions": ["0.0", "100"],
        "line-gradient-stop-colors": ["#555555", "#555555"],
      },
    },
    {
      selector: "edge.success-highlight",
      css: {
        width: "4px",
        "target-arrow-color": "#02CB70",
        "line-color": "#02CB70",
        "transition-property": "line-color, width",
        "transition-duration": "0.5s",
        "line-fill": "linear-gradient",
        "line-gradient-stop-positions": ["0.0", "100"],
        "line-gradient-stop-colors": ["#41dcab", "#41dcab"],
      },
    },
    {
      selector: ".eh-handle",
      style: {
        "background-color": "#337ab7",
        width: "1px",
        height: "1px",
        shape: "circle",
        "border-width": "1px",
        "border-color": "black",
      },
    },
    {
      selector: ".eh-source",
      style: {
        "border-width": "3",
        "border-color": "#337ab7",
      },
    },
    {
      selector: ".eh-target",
      style: {
        "border-width": "3",
        "border-color": "#337ab7",
      },
    },
    {
      selector: ".eh-preview, .eh-ghost-edge",
      style: {
        "background-color": "#337ab7",
        "line-color": "#337ab7",
        "target-arrow-color": "#337ab7",
        "source-arrow-color": "#337ab7",
      },
    },
    {
      selector: "edge:selected",
      css: {
        "target-arrow-color": "#f85a3e",
      },
    },
    {
      selector: `edge[?source_workflow]`,
      css: {
        "background-opacity": "1",
        "font-size": "0px",
      },
    },
    {
      selector: `edge[?correlation]`,
      css: {
		  "curve-style": "straight",
		  "width": 2,
		  "line-color": "#ccc",
		  "target-arrow-color": "#ccc",
		  "source-arrow-shape": "none",
		  "target-arrow-shape": "none",
      },
    },
    {
      selector: `node[type="CORRELATION"]`,
      css: {
        label: function (element) {
          return element.data("label")
        },
        shape: "round",
        color: "data(color)",
        width: "data(width)",
        height: "data(height)",
        padding: "0px",
        margin: "0px",
        "background-color": function(element) {
			const value = element.data()
			if (value?.backgroundcolor === null || value?.backgroundcolor === undefined) {
				return "#888888"
			}

			return element.data("backgroundcolor")
		},
        "background-fill": "data(fillstyle)",
        "background-gradient-direction": "to-right",
        "background-gradient-stop-colors": "data(fillGradient)",
        "border-width": "0px",
        "font-size": "0px",
      },
    },
    {
      selector: `node[?source_workflow]`,
      css: {
        "background-opacity": "0",
        "font-size": "0px",
      },
    },
    {
      selector: "node:selected",
      css: {
        "border-color": "#f86a3e",
        "border-width": "7px",
      },
    },
    {
      selector: `node[buttonType="condition-drag"]`,
      css: {
      "width": "5px",
      "height": "5px",
      "background-color": "#f85a3e",
      },
    },
    {
      selector: `node[large_image="/images/singul_green.png"]`,
      css: {
		  "background-image": function(element) {
			const nodeData = element.data()
			if (apps === null || apps === undefined) {
				return nodeData?.large_image
			}

			const params = nodeData["parameters"]
			if (params === null || params === undefined) {
				return nodeData?.large_image
			}

			var foundappname = ""
			for (var key in params) {
				const param = params[key]
				if (param.name === "app_name") {
					foundappname = param?.value.toLowerCase().replaceAll(" ", "_")
					break
				}
			}

			if (foundappname == "") {
				return nodeData?.large_image
			}

			for (var key in apps) {
				const app = apps[key]
				const newappname = app.name.toLowerCase().replaceAll(" ", "_")
				if (newappname == foundappname) {
					if (app.large_image !== null && app.large_image !== undefined && app.large_image != "") {
						element.data("large_image", app.large_image)
						return app.large_image
					}
				}
			}

			return nodeData?.large_image
		  },
      },
    },
    {
      selector: `node[name="switch"]`,
      css: {
        label: function(element) {
			// Load from the actual element
			var nodeheight = 400 
			var conditions = [{
			  "name": "Condition 1",
			  "check": "X equals Y",
			},
			{
			  "name": "Condition 2",
			  "check": "X2 equals Y2",
			},
			{
			  "name": "Condition 3",
			  "check": "X3 equals Y3",
			}]
	  
			conditions.push({
			  "name": "Else",
			  "check": "If all else fails",
			})
	  
			const newlines = nodeheight / conditions.length
			console.log("Newlines: ", newlines)
	  
			const label = conditions.map((condition) => {
			  return `${condition.name}\n\n\n`
			}).join("\n")
	  
			return label
		},
        color: theme.palette.text.primary || "white",
        "border-color": "#f85a3e",
      	"background-color": "#1f1f1f",
        "font-size": "19px",
        "text-margin-x": "-110px",
      	"text-wrap": "wrap",
        shape: "roundrectangle",
        width: "100",
        height: "300",
  
      },
    },
  ];
}

//{
//	selector: 'edge[?hasErrors]',
//	css: {
//		'target-arrow-color': '#991818',
//		'line-color': '#991818',
//		'line-style': 'dashed',
//		"line-fill": "linear-gradient",
//		"line-gradient-stop-positions": ["0.0", "100"],
//		"line-gradient-stop-colors": ["#991818", "#991818"],
//	},
//},