import { SVG, SVG2 } from './esveegee'

import { Colors } from './colors.js'

import { cap, join, miterLimit } from './complex.js'

import { shaper } from './shaper.js'

import { ataxx, chess } from './checkers.js'
import { diagram } from './diagram.js'
import { timeline } from './timeline.js'

import * as Animation from './animation.js'

const compositionTest = SVG2()
    .rect(10, 20).position(10, 20)
    .line(10, 10, 150, 200).stroke('red')
    .circle(10).fill('blue')

console.log(compositionTest)

const drawers = new Map([
    ['line', (s: SVG) => s.line(10, 10, 90, 50)],
    ['circle', (s: SVG) => s.circle(50, 31.25, 20)],
    ['path', (s: SVG) => s.path('M 5 40 C 20 5, 32 5, 45 40 S 55 55, 80 40')],
    ['polygon', (s: SVG) => s.polygon(16, 56, 36, 40, 36, 60, 60, 16)],
    ['polyline', (s: SVG) => s.polyline(16, 56, 36, 40, 36, 60, 60, 16)],
    ['rect', (s: SVG) => s.rect(16, 16, 50, 30)],

    ['group', (s: SVG) => s.group(16, 16).draggable()
        .circle(20, 20, 15).fill(Colors.Uluru).draggable()
        .rect(20, 20, 30, 20).fill(Colors.SeaBlue)],

    ['stroke', (s: SVG) => s.rect(16, 16, 50, 30).stroke(Colors.Uluru)],
    ['fill', (s: SVG) => s.rect(16, 16, 50, 30).fill(Colors.Uluru).stroke()],
    ['stroke-width', (s: SVG) => s.line(16, 25, 50, 50).width(5)],
    ['pattern', (s: SVG) => s.pattern(s.line(16, 16, 70, 70)).rect(16, 16, 50, 30).fill('hatch-1')],

    ['text', (s: SVG) => s.text('esviegee', 10, 40).size(18).fill().stroke(Colors.Uluru)],
    ['text-stroke', (s: SVG) => s.text('esviegee', 10, 40).size(18).fill().stroke(Colors.Uluru).width(1.5)],

    // complex
    ['html', (s: SVG) => s.html('<em>HTML</em> can be used in <em>SVG</em>',
        0, 0, 80, 80)],

    ['draggable', (s: SVG) => s.circle(25 + 16, 35, 25).fill(Colors.SeaBlue).draggable()],
    ['sizeable', (s: SVG) => s.circle(25 + 16, 35, 25).fill(Colors.SeaBlue).sizeable()],

    ['grid', (s: SVG) => s.grid(10, 10, 16.5, 16.5)],

    ['cap', (s: SVG) => cap(s)],
    ['join', (s: SVG) => join(s)],
    ['miter-limit', (s: SVG) => miterLimit(s)],

    ['chess', (s: SVG) => chess(s)],
    ['ataxx', (s: SVG) => ataxx(s)],
    ['shaper1', (s: SVG) => shaper(s)],
    // TODO probably .editor() to create individual nodes that can be dragged
    ['shaper2', (s: SVG) => s.polyline(16, 300, 50, 100, 120, 250, 200, 250, 300, 300 - 16).draggable()],

    ['timeline', (s: SVG) => timeline(s)],
    ['diagram', (s: SVG) => diagram(s)],

    // media
    ['audio', (s: SVG) => s.audio('audio.ogg')],
    ['canvas', (s: SVG) => s.canvas()],
    ['iframe', (s: SVG) => s.iframe('somehtml.html')],
    ['video', (s: SVG) => s.video('video.mp4')],

    // animation
    // TODO ['animation', (s: SVG) => (s as Animatable).animate()]
])

const images = document.querySelectorAll<HTMLElement>('.svg-test')

const [width, height] = [400, 250]
const viewBox = `0 0 ${width / 4} ${height / 4}`
console.log({ viewBox })

for (const image of images) {

    const svg = SVG.on(image).size(width, height).stroke(Colors.Text)

    // scale up to emphasize stroke width
    svg.attribute('viewBox', viewBox)
    // const svg = SVG2(500, 500)    // TODO functional interface (but a lot of intellisense, more than the object one)

    const name = image.dataset.draw
    const drawer = drawers.get(name!)

    const figcaption = document.createElement('figcaption')
    figcaption!.innerHTML = '<pre></pre>'
    figcaption!.querySelector('pre')!.textContent = `${('' + drawer!).replace(/\(s.*\) => /, '')}`
    image.appendChild(figcaption)

    if (drawer) {
        drawer(svg)
    } else {
        console.log(`${name} is not a function`)
    }
}