export const textMaxWidthPx = 200;

export const cytoscapeStyle: cytoscape.Stylesheet[] = [
  {
    selector: '*',
    style: {
      'font-family': 'Roboto',
      'font-size': '16px'
    }
  },
  {
    selector: 'node',
    style: {
      'border-style': 'solid',
      'border-color': '#018cf7',
      'border-width': 4,
      'background-color': '#f0f8ff',
      'text-wrap': 'wrap',
      'text-halign': 'center',
      'text-valign': 'center',
      color: '#090b0d',
      label: 'data(name)',
      width: 'data(width)',
      height: 'data(height)',
      shape: 'round-rectangle'
    }
  },
  {
    selector: 'node[agb_typ = "DYN"]',
    style: {
      'border-color': '#018cf7'
    }
  },
  {
    selector: 'node[agb_typ != "DYN"]',
    style: {
      'border-color': '#2fbc2f',
      'background-color': '#f0fff0'
    }
  },
  {
    selector: 'node[agb_typ = ""]',
    style: {
      'border-color': '#757575',
      'background-color': '#f7f7f7'
    }
  },
  {
    selector: 'edge',
    style: {
      width: 3,
      'line-color': '#5a667d',
      'line-opacity': '1',
      'curve-style': 'bezier',
      'target-arrow-color': '#051b2c',
      'target-arrow-shape': 'triangle',
      'arrow-scale': 1.5,
      label: function(edge) {
        return edge.data('name');
      },
      'text-wrap': 'wrap',
      'text-max-width': `${textMaxWidthPx}px`,
      color: '#090b0d',
      'text-background-color': '#fff',
      'text-background-opacity': 1,
      'text-background-padding': 2,
      'text-background-shape': 'round-rectangle',
      'text-rotation': 'autorotate'
    }
  },
  {
    selector: ':loop',
    style: {
      'curve-style': 'unbundled-bezier',
      'control-point-step-size': 100,
      'target-endpoint': 'outside-to-line',
      'source-endpoint': 'outside-to-line'
    }
  },
  {
    selector: 'edge[type = "agb_dyn"]',
    style: {
      label: '',
      'line-style': 'solid'
    }
  },
  {
    selector: 'edge[type = "pkt"]',
    style: {
      'line-style': 'dashed'
    }
  },
  {
    selector: 'edge[pktType = "weiterleitung"]',
    style: {
      'line-color': '#5a667d'
    }
  },
  {
    selector: 'edge[pktType = "weiterleitung fix"]',
    style: {
      'line-color': '#018cf7'
    }
  },
  {
    selector: 'edge[pktType = "weiterleitung uebergreifend"]',
    style: {
      'line-color': '#ed0000'
    }
  },
  {
    selector: 'edge[pktType = "weiterleitung schrittweise"]',
    style: {
      'line-color': '#e38c00'
    }
  }
];