import type { Cell } from '@antv/x6';
import { STATUS_COLORS } from '../../../constants/status-colors';
import { SPLICE_BORDER_RADIUS } from '../../../constants/sizes';
import type { EntityStatus } from '../../../types/index';

interface SpliceNodeData {
  name: string;
  marking: string;
  id1: string;
  id2: string;
  status: EntityStatus;
}

export function renderSpliceNode(cell: Cell): HTMLElement {
  const data = cell.getData() as SpliceNodeData;
  const colors = STATUS_COLORS[data.status];
  const size = (cell as any).getSize() as { width: number; height: number };

  const container = document.createElement('div');
  Object.assign(container.style, {
    width: `${size.width}px`,
    height: `${size.height}px`,
    border: `1px solid ${colors.border}`,
    borderRadius: `${SPLICE_BORDER_RADIUS}px`,
    background: colors.fill,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    boxSizing: 'border-box',
    textAlign: 'center',
    padding: '4px',
    fontSize: '10px',
    lineHeight: '14px',
  });

  const nameEl = document.createElement('div');
  Object.assign(nameEl.style, {
    fontWeight: '700',
    fontSize: '11px',
    marginBottom: '2px',
    wordBreak: 'break-word',
  });
  nameEl.textContent = data.name;
  container.appendChild(nameEl);

  if (data.marking) {
    const markingEl = document.createElement('div');
    Object.assign(markingEl.style, { color: '#595959', fontSize: '9px' });
    markingEl.textContent = data.marking;
    container.appendChild(markingEl);
  }

  return container;
}