// Shape Test Generator for CanvasShapeIndicators.tsx
// Run this in the Chrome DevTools console when tldraw is loaded

(function generateTestShapes() {
  // Get the editor instance
  const editor = window.editor || document.querySelector('[data-testid="tldraw"]')?.__tldraw_editor__;
  
  if (!editor) {
    console.error('Could not find editor instance. Make sure tldraw is loaded.');
    console.log('Tip: The editor is usually available as window.editor in development mode');
    return;
  }

  // Style options (no blue colors to avoid confusion with indicators)
  const colors = ['black', 'grey', 'light-violet', 'violet', 'yellow', 'orange', 'green', 'light-green', 'light-red', 'red'];
  const geoTypes = ['rectangle', 'ellipse', 'triangle', 'diamond', 'pentagon', 'hexagon', 'octagon', 'star', 'rhombus', 'oval', 'trapezoid', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'x-box', 'check-box', 'cloud', 'heart'];
  const fills = ['none', 'semi', 'solid', 'pattern', 'fill'];
  const dashes = ['draw', 'solid', 'dashed', 'dotted'];
  const sizes = ['s', 'm', 'l', 'xl'];
  
  const shapes = [];
  let x = 0;
  let y = 0;
  const spacing = 150;
  const rowHeight = 150;
  let shapeIndex = 0;

  // Helper to create unique shape IDs
  const createId = () => `shape:test_${Date.now()}_${shapeIndex++}`;

  // 1. GEO SHAPES - All types with different styles
  console.log('Creating geo shapes...');
  geoTypes.forEach((geo, i) => {
    const col = i % 6;
    const row = Math.floor(i / 6);
    shapes.push({
      id: createId(),
      type: 'geo',
      x: col * spacing,
      y: row * rowHeight,
      props: {
        geo,
        w: 100,
        h: 100,
        color: colors[i % colors.length],
        fill: fills[i % fills.length],
        dash: dashes[i % dashes.length],
        size: sizes[i % sizes.length],
      }
    });
  });

  // Offset for next section
  let sectionY = Math.ceil(geoTypes.length / 6) * rowHeight + 100;

  // 2. ARROWS with different styles
  console.log('Creating arrow shapes...');
  const arrowheadTypes = ['arrow', 'triangle', 'square', 'dot', 'pipe', 'diamond', 'inverted', 'bar', 'none'];
  arrowheadTypes.forEach((arrowhead, i) => {
    shapes.push({
      id: createId(),
      type: 'arrow',
      x: (i % 4) * 200,
      y: sectionY + Math.floor(i / 4) * 120,
      props: {
        color: colors[i % colors.length],
        fill: fills[i % fills.length],
        dash: dashes[i % dashes.length],
        size: sizes[i % sizes.length],
        arrowheadStart: arrowhead,
        arrowheadEnd: arrowheadTypes[(i + 1) % arrowheadTypes.length],
        start: { x: 0, y: 0 },
        end: { x: 150, y: 80 },
      }
    });
  });

  sectionY += Math.ceil(arrowheadTypes.length / 4) * 120 + 100;

  // 3. NOTE shapes with different colors and sizes
  console.log('Creating note shapes...');
  colors.slice(0, 8).forEach((color, i) => {
    shapes.push({
      id: createId(),
      type: 'note',
      x: (i % 4) * 250,
      y: sectionY + Math.floor(i / 4) * 200,
      props: {
        color,
        size: sizes[i % sizes.length],
        scale: 1,
      }
    });
  });

  sectionY += Math.ceil(8 / 4) * 200 + 100;

  // 4. TEXT shapes with different fonts and colors
  console.log('Creating text shapes...');
  const fonts = ['draw', 'sans', 'serif', 'mono'];
  const textAligns = ['start', 'middle', 'end'];
  fonts.forEach((font, i) => {
    shapes.push({
      id: createId(),
      type: 'text',
      x: (i % 4) * 200,
      y: sectionY,
      props: {
        color: colors[i % colors.length],
        size: sizes[i % sizes.length],
        font,
        textAlign: textAligns[i % textAligns.length],
        w: 150,
        autoSize: true,
        scale: 1,
      }
    });
  });

  sectionY += 150;

  // 5. FRAME shapes
  console.log('Creating frame shapes...');
  colors.slice(0, 4).forEach((color, i) => {
    shapes.push({
      id: createId(),
      type: 'frame',
      x: i * 300,
      y: sectionY,
      props: {
        w: 250,
        h: 200,
        name: `Frame ${i + 1}`,
        color,
      }
    });
  });

  sectionY += 300;

  // 6. LINE shapes with different styles
  console.log('Creating line shapes...');
  dashes.forEach((dash, i) => {
    shapes.push({
      id: createId(),
      type: 'line',
      x: i * 200,
      y: sectionY,
      props: {
        color: colors[i % colors.length],
        dash,
        size: sizes[i % sizes.length],
        points: {
          a1: { id: 'a1', index: 'a1', x: 0, y: 0 },
          a2: { id: 'a2', index: 'a2', x: 100, y: 50 },
          a3: { id: 'a3', index: 'a3', x: 150, y: 0 },
        }
      }
    });
  });

  sectionY += 150;

  // 7. Shapes at various OPACITIES
  console.log('Creating shapes with varying opacity...');
  [1, 0.75, 0.5, 0.25].forEach((opacity, i) => {
    shapes.push({
      id: createId(),
      type: 'geo',
      x: i * spacing,
      y: sectionY,
      opacity,
      props: {
        geo: 'rectangle',
        w: 100,
        h: 100,
        color: 'red',
        fill: 'solid',
      }
    });
  });

  sectionY += rowHeight + 50;

  // 8. Rotated shapes
  console.log('Creating rotated shapes...');
  [0, Math.PI / 6, Math.PI / 4, Math.PI / 3, Math.PI / 2].forEach((rotation, i) => {
    shapes.push({
      id: createId(),
      type: 'geo',
      x: i * spacing + 50,
      y: sectionY + 50,
      rotation,
      props: {
        geo: 'star',
        w: 80,
        h: 80,
        color: colors[i % colors.length],
        fill: 'solid',
      }
    });
  });

  sectionY += rowHeight + 100;

  // 9. Different sizes
  console.log('Creating shapes with different sizes...');
  [50, 100, 150, 200].forEach((size, i) => {
    shapes.push({
      id: createId(),
      type: 'geo',
      x: i * 250,
      y: sectionY,
      props: {
        geo: 'ellipse',
        w: size,
        h: size,
        color: colors[i % colors.length],
        fill: fills[i % fills.length],
        dash: dashes[i % dashes.length],
      }
    });
  });

  // Create all shapes
  console.log(`Creating ${shapes.length} shapes...`);
  editor.createShapes(shapes);

  // Select all created shapes
  const createdIds = shapes.map(s => s.id);
  editor.select(...createdIds);

  // Zoom to fit all shapes
  editor.zoomToSelection();

  console.log(`✅ Created ${shapes.length} test shapes!`);
  console.log('Shape types created: geo (all variants), arrow, note, text, frame, line');
  console.log('Variations include: colors (no blues), fills, dashes, sizes, opacities, rotations');

  return shapes;
})();