import { getWindow } from '../src/utils/window.js'

function tag(name, attrs, children) {
  let doc = getWindow().document
  var el = doc.createElement(name)

  for(var i in attrs){
    el.setAttribute(i, attrs[i])
  }

  for(var i in children){
    if(typeof children[i] == 'string')
      children[i] = doc.createTextNode(children[i])

    el.appendChild(children[i])
  }

  return el
}

export function fixtures () {
  return tag('svg', {
    height:0,
    width:0,
    id:'inlineSVG'
  },[
    tag('defs', {}, [
      tag('linearGradient', {}, [
        tag('stop', {offset: '5%',  'stop-color': 'green'}),
        tag('stop', {offset: '95%', 'stop-color': 'gold'}),
      ]),
      tag('radialGradient', {}, [
        tag('stop', {offset: '5%',  'stop-color': 'green'}),
        tag('stop', {offset: '95%', 'stop-color': 'gold'}),
      ])
    ]),
    tag('desc', {}, ['Some description']),
    tag('path', {
      id: 'lineAB',
      d: 'M 100 350 l 150 -300',
      stroke: 'red',
      'stroke-width': '3',
      fill: 'none'
    }),
    tag('path', {
      id: 'lineBC',
      d: 'M 250 50 l 150 300',
      stroke: 'red',
      'stroke-width': '3',
      fill: 'none'
    }),
    tag('path', {
      d: 'M 175 200 l 150 0',
      stroke: 'green',
      'stroke-width': '3',
      fill: 'none'
    }),
    tag('path', {
      d: 'M 100 350 q 150 -300 300 0',
      stroke: 'blue',
      'stroke-width': '5',
      fill: 'none'
    }),
    tag('g', {
      stroke: 'black',
      'stroke-width': '2',
      fill: 'black',
      id: 'pointGroup'
    },[
      tag('circle', {
        id: 'pointA',
        cx: '100',
        cy: '350',
        r: '3',
      }),
      tag('circle', {
        id: 'pointB',
        cx: '250',
        cy: '50',
        r: '50',
      }),
      tag('circle', {
        id: 'pointC',
        cx: '400',
        cy: '350',
        r: '50',
      })
    ]),
    tag('g', {
      'font-size': '30',
      font: 'sans-serif',
      fill: 'black',
      stroke: 'none',
      'text-anchor': 'middle',
      id: 'labelGroup'
    },[
      tag('text', {
        x: '100',
        y: '350',
        dy: '-30',
      }, ['A']),
      tag('text', {
        x: '250',
        y: '50',
        dy: '-10',
      }, ['B']),
      tag('text', {
        x: '400',
        y: '350',
        dx: '30',
      }, ['C'])
    ]),
    tag('polygon', {points: '200,10 250,190 160,210'}),
    tag('polyline', {points: '20,20 40,25 60,40 80,120 120,140 200,180'})
  ])
}

export function buildFixtures () {
  let doc = getWindow().document
  let body = doc.body || doc.documentElement

  let div = doc.createElement('div')
  div.id = 'fixtures'

  try {
    // FIXME: doesnt work in svgdom
    div.style.position = 'absolute'
    div.style.top = 0
    div.style.left = 0
  } catch (e) {}

  div.appendChild(fixtures())
  body.appendChild(div)
}

export function buildCanvas () {
  let doc = getWindow().document
  let body = doc.body || doc.documentElement

  let div = doc.createElement('div')
  div.id = 'canvas'

  try {
    // FIXME: doesnt work in svgdom
    div.style.position = 'absolute'
    div.style.top = 0
    div.style.left = 0
  } catch (e) {}
  body.appendChild(div)
}

export function clear () {
  let doc = getWindow().document
  let canvas = doc.getElementById('canvas')
  //let fixtures = doc.getElementById('fixtures')

  //fixtures.parentNode.removeChild(fixtures)
  canvas.parentNode.removeChild(canvas)
}