import G6 from '@antv/g6';

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  layout: {
    type: 'grid',
    width: 400,
    height: 400,
  },
  autoFit: 'center',
  node: {
    keyShape: {
      r: 10,
    },
    labelShape: {
      text: {
        fields: ['id'],
        formatter: (model) => model.id,
      },
    },
  },
  combo: {
    labelShape: {
      text: {
        fields: ['id'],
        formatter: (model) => model.id,
      },
    },
    animates: {
      // collapse and expand are kinds of update, so response these update with the following animations
      update: [
        {
          fields: ['lineWidth', 'r'],
          shapeId: 'keyShape',
        },
        {
          fields: ['opacity'],
          shapeId: 'haloShape',
        },
      ],
    },
  },
  modes: {
    default: ['drag-combo', 'click-select', 'drag-node', 'drag-canvas', 'zoom-canvas', 'collapse-expand-combo'],
  },
  data: {
    nodes: [
      { id: 'node1', data: { parentId: 'combo1' } },
      { id: 'node2', data: { parentId: 'combo1' } },
      { id: 'node3', data: { parentId: 'combo2' } },
      { id: 'node4', data: { parentId: 'combo1' } },
      { id: 'node5', data: {} },
    ],
    edges: [
      { id: 'edge1', source: 'node1', target: 'node2', data: {} },
      { id: 'edge2', source: 'node1', target: 'node3', data: {} },
      { id: 'edge3', source: 'node1', target: 'node4', data: {} },
      { id: 'edge4', source: 'node2', target: 'node3', data: {} },
      { id: 'edge5', source: 'node3', target: 'node4', data: {} },
      { id: 'edge6', source: 'node4', target: 'node5', data: {} },
    ],
    combos: [
      { id: 'combo1', data: { parentId: 'combo2' } },
      { id: 'combo2', data: {} },
      { id: 'combo3', data: {} },
    ],
  },
});

const btnContainer = document.createElement('div');
btnContainer.style.position = 'absolute';
container.appendChild(btnContainer);
const tip = document.createElement('span');
tip.innerHTML = '👉 Double Click a Combo to Collapse/Expand';
btnContainer.appendChild(tip);

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.destroyed) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.setSize([container.scrollWidth, container.scrollHeight]);
  };