import { test, expect } from '../fixtures.js'

test.describe('SVG core drawing', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/tests/unit-harness.html')
    await page.waitForFunction(() => Boolean(window.svgHarness))
  })

  test('manages ids and adopts orphaned elements into layers', async ({ page }) => {
    const result = await page.evaluate(() => {
      const { draw, namespaces } = window.svgHarness
      const svg = document.createElementNS(namespaces.NS.SVG, 'svg')
      document.getElementById('root').append(svg)

      const existingLayer = document.createElementNS(namespaces.NS.SVG, 'g')
      existingLayer.classList.add('layer')
      const title = document.createElementNS(namespaces.NS.SVG, 'title')
      title.textContent = 'Layer 1'
      existingLayer.append(title)
      const orphan = document.createElementNS(namespaces.NS.SVG, 'rect')
      orphan.id = 'rect-orphan'
      svg.append(existingLayer, orphan)

      const drawing = new draw.Drawing(svg, 'p_')
      drawing.identifyLayers()

      const id1 = drawing.getNextId()
      const id2 = drawing.getNextId()
      const released = drawing.releaseId(id2)
      const reused = drawing.getNextId()
      const next = drawing.getNextId()

      return {
        id1,
        id2,
        released,
        reused,
        next,
        layerCount: drawing.getNumLayers(),
        currentLayer: drawing.getCurrentLayerName(),
        orphanParentTag: orphan.parentNode?.tagName.toLowerCase()
      }
    })

    expect(result.id1).toBe('p_1')
    expect(result.id2).toBe('p_2')
    expect(result.released).toBe(true)
    expect(result.reused).toBe(result.id2)
    expect(result.next).toBe('p_3')
    expect(result.layerCount).toBe(2)
    expect(result.currentLayer).toBe('Layer 2')
    expect(result.orphanParentTag).toBe('g')
  })

  test('reorders and toggles layers', async ({ page }) => {
    const result = await page.evaluate(() => {
      const { draw, namespaces } = window.svgHarness
      const svg = document.createElementNS(namespaces.NS.SVG, 'svg')
      document.getElementById('root').append(svg)
      const drawing = new draw.Drawing(svg)
      drawing.identifyLayers() // creates first layer
      const originalName = drawing.getCurrentLayerName()

      drawing.createLayer('Layer Two')
      drawing.createLayer('Layer Three')
      drawing.setCurrentLayer('Layer Two')
      const movedDown = drawing.setCurrentLayerPosition(2)
      const orderAfterDown = [
        drawing.getLayerName(0),
        drawing.getLayerName(1),
        drawing.getLayerName(2)
      ]

      drawing.setCurrentLayer('Layer Three')
      const movedUp = drawing.setCurrentLayerPosition(0)
      const orderAfterUp = [
        drawing.getLayerName(0),
        drawing.getLayerName(1),
        drawing.getLayerName(2)
      ]

      const target = drawing.getCurrentLayerName()
      drawing.setLayerVisibility(target, false)
      const hidden = drawing.getLayerVisibility(target)
      drawing.setLayerOpacity(target, 0.5)

      return {
        originalName,
        movedDown: Boolean(movedDown),
        movedUp: Boolean(movedUp),
        orderAfterDown,
        orderAfterUp,
        hidden,
        opacity: drawing.getLayerOpacity(target)
      }
    })

    expect(result.originalName).toBe('Layer 1')
    expect(result.movedDown).toBe(true)
    expect(result.orderAfterDown[2]).toBe('Layer Two')
    expect(result.movedUp).toBe(true)
    expect(result.orderAfterUp[0]).toBe('Layer Three')
    expect(result.hidden).toBe(false)
    expect(result.opacity).toBe(0.5)
  })

  test('clones and deletes layers and randomizes ids', async ({ page }) => {
    const result = await page.evaluate(() => {
      const { draw, namespaces } = window.svgHarness
      const svg = document.createElementNS(namespaces.NS.SVG, 'svg')
      document.getElementById('root').append(svg)
      const drawing = new draw.Drawing(svg)
      drawing.identifyLayers()

      const currentLayer = drawing.getCurrentLayer()
      const circle = document.createElementNS(namespaces.NS.SVG, 'circle')
      circle.setAttribute('id', 'seed')
      currentLayer.append(circle)

      const cloneGroup = drawing.cloneLayer('Duplicated')
      const clonedCircle = cloneGroup?.querySelector('circle')
      const beforeDelete = drawing.getNumLayers()
      const deleted = drawing.deleteCurrentLayer()
      const afterDelete = drawing.getNumLayers()

      draw.randomizeIds(true, drawing)
      const nonceSet = drawing.getNonce()
      draw.randomizeIds(false, drawing)

      return {
        cloneHasChild: Boolean(clonedCircle),
        beforeDelete,
        afterDelete,
        deletedTag: deleted?.tagName.toLowerCase(),
        nonceSet,
        nonceCleared: drawing.getNonce()
      }
    })

    expect(result.cloneHasChild).toBe(true)
    expect(result.beforeDelete).toBe(2)
    expect(result.afterDelete).toBe(1)
    expect(result.deletedTag).toBe('g')
    expect(result.nonceSet).not.toBe('')
    expect(result.nonceCleared).toBe('')
  })
})