import cytoscape from "cytoscape";
import { baseStylesheet } from "@common/style";

const physicalStyles: cytoscape.StylesheetStyle[] = [
  {
    selector: "node.pe-cluster",
    style: {
      shape: "roundrectangle",
      width: "label",
      height: "label",
      "border-width": 1.5,
      "border-color": "#7986cb",
      "background-color": "#e8eaf6",
      "background-opacity": 0.5,
      padding: "16px",
      "text-valign": "top",
      "text-halign": "center",
      label: "data(label)",
      "font-size": 9,
      "font-weight": "bold",
      color: "#3949ab",
    },
  },
  {
    selector: "node.port-node",
    style: {
      shape: "ellipse",
      width: 10,
      height: 10,
      "background-color": "#e57373",
      "background-opacity": 1,
      "border-width": 0,
      label: "",
    },
  },
  {
    selector: "edge.intra-pe",
    style: {
      width: 0.75,
      "line-color": "#616161",
      "target-arrow-color": "#616161",
      "source-label": "",
      "target-label": "data(targetLabel)",
      "target-text-offset": 5,
      "target-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: "edge.exit-segment",
    style: {
      width: 0.75,
      "line-color": "#616161",
      "target-arrow-shape": "none",
      "target-label": "",
      "source-label": "",
    },
  },
  {
    selector: "edge.entry-segment",
    style: {
      width: 0.75,
      "line-color": "#616161",
      "target-arrow-color": "#616161",
      "target-arrow-shape": "triangle",
      "source-label": "",
      "target-label": "data(targetLabel)",
      "target-text-offset": 5,
      "target-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: "edge.bus-segment",
    style: {
      width: 2,
      "line-color": "#e57373",
      "target-arrow-color": "#e57373",
      "target-arrow-shape": "triangle",
      "arrow-scale": 0.8,
      label: "data(label)",
      "target-label": "",
      "source-label": "",
      "text-margin-y": -8,
      "font-size": 7,
      "font-family": "monospace",
      color: "#e57373",
      "text-background-color": "#fff",
      "text-background-opacity": 0.9,
      "text-background-padding": "1px",
    },
  },
  {
    selector: "edge.seed-edge",
    style: {
      width: 1,
      "line-style": "dashed",
      "line-color": "#9e9e9e",
      "target-arrow-color": "#9e9e9e",
      "target-text-offset": 5,
      "target-text-margin-y": -6,
    },
  },
  {
    selector: "edge.physical",
    style: {
      "curve-style": "bezier",
    },
  },
];

export const stylesheet: cytoscape.StylesheetStyle[] = [
  ...baseStylesheet,
  ...physicalStyles,
];