import cytoscape from "cytoscape";

export const baseStylesheet: cytoscape.StylesheetStyle[] = [
  {
    selector: "node",
    style: {
      shape: "ellipse",
      width: 40,
      height: 40,
      "text-valign": "center",
      "text-halign": "center",
      label: "data(label)",
      "text-wrap": "wrap",
      "text-max-width": "36px",
      "font-size": 8,
      "font-family": "monospace",
      color: "#111",
      "text-outline-width": 0,
      "background-color": "#fff",
      "background-opacity": 1,
      "border-width": 1.5,
      "border-color": "data(colour)",
    },
  },
  {
    selector: "$node > node",
    style: {
      shape: "roundrectangle",
      width: "label",
      height: "label",
      "border-style": "dashed",
      "border-width": 1,
      "border-color": "#888",
      "background-color": "#c8c8c8",
      "background-opacity": 0.06,
      padding: "20px",
      "text-valign": "top",
      "text-halign": "center",
      label: "data(label)",
      "font-size": 9,
      color: "#666",
    },
  },
  {
    selector: "edge",
    style: {
      "curve-style": "unbundled-bezier",
      "target-arrow-shape": "triangle",
      "arrow-scale": 0.6,
      "target-arrow-color": "#333",
      "line-color": "#333",
      width: 1,
      "target-label": "data(targetLabel)",
      "target-text-offset": 14,
      "target-text-margin-y": -6,
      "source-label": "data(sourceLabel)",
      "source-text-offset": 14,
      "source-text-margin-y": -6,
      "font-size": 7,
      "font-family": "monospace",
      color: "#333",
      "text-background-color": "#fff",
      "text-background-opacity": 0.9,
      "text-background-padding": "1px",
    },
  },
  {
    selector: "node.error",
    style: {
      "border-style": "dashed",
      "border-width": 1.5,
      "border-color": "#e53935",
    },
  },
  {
    selector: "edge.error",
    style: {
      "line-style": "dashed",
      "line-color": "#e53935",
      "target-arrow-color": "#e53935",
    },
  },
  {
    selector: 'node[category = "structure_memory"]',
    style: {
      shape: "roundrectangle",
      width: "label",
      height: "label",
      padding: "14px",
      "text-valign": "center",
      "text-halign": "center",
      "text-wrap": "wrap",
      "text-max-width": "200px",
      "font-size": 8,
      "font-family": "monospace",
      "background-color": "#efebe9",
      "background-opacity": 0.5,
      "border-style": "dashed",
      "border-width": 1.5,
      "border-color": "#795548",
      color: "#4e342e",
    },
  },
  {
    selector: "edge.synthetic",
    style: {
      "line-style": "dashed",
      "line-color": "#795548",
      "target-arrow-color": "#795548",
      width: 1,
    },
  },
];