@behaviors: [ Polymer.IronResizableBehavior ]

  @properties:

    adjs: { type: Object, notify: true }, # adjId: Adjustable

  @observers: [

    'updateAllCoords(adjs)'

  ]

  @listeners:

    'iron-resize': 'resizeUpdate'

  connectedCallback: ->

    super.connectedCallback()

    @adjs = {}

    @ctx = @$.canvas.getContext('2d')

    @redraw()

  onDown: (ev) ->

    if ev.buttons == 1

      ev.stopPropagation()

      start = $V([ev.x, ev.y])

      adj = @_adjAtPoint(start)

      if adj

        @currentDrag = {start: start, adj: adj}

        adj.startDrag()

  onMove: (ev) ->

    pos = $V([ev.x, ev.y])

    if @currentDrag

      @currentDrag.cur = pos

      @currentDrag.adj.continueDrag(@currentDrag.cur.subtract(@currentDrag.start))

  onUp: (ev) ->

    return unless @currentDrag

    @currentDrag.adj.endDrag()

    @currentDrag = null

  setAdjuster: (adjId, makeAdjustable) ->

    # callers register/unregister the Adjustables they want us to make

    # adjuster elements for. Caller invents adjId.  makeAdjustable is

    # a function returning the Adjustable or it is null to clear any

    # adjusters with this id.

    if not @adjs[adjId] or not makeAdjustable?

      if not makeAdjustable?

        delete @adjs[adjId]

      else

        adj = makeAdjustable()

        @adjs[adjId] = adj

        adj.id = adjId

    window.debug_adjsCount = Object.keys(@adjs).length

  updateAllCoords: ->

    @redraw()

  _adjAtPoint: (pt) ->

    nearest = @qt.find(pt.e(1), pt.e(2))

    if not nearest? or nearest.distanceFrom(pt) > 50

      return null

    return nearest?.adj

  resizeUpdate: (ev) ->

    @$.canvas.width = ev.target.offsetWidth

    @$.canvas.height = ev.target.offsetHeight

    @redraw()

  redraw: (adjs) ->

  _throttledRedraw: () ->

    console.time('adjs redraw')

    @_layoutCenters()

    @ctx.clearRect(0, 0, @$.canvas.width, @$.canvas.height)

    for adjId, adj of @adjs

      ctr = adj.getCenter()

      target = adj.getTarget()

      @_drawConnector(ctr, target)

      @_drawAdjuster(adj.getDisplayValue(),

                     Math.floor(ctr.e(1)) - 20, Math.floor(ctr.e(2)) - 10,

                     Math.floor(ctr.e(1)) + 20, Math.floor(ctr.e(2)) + 10)

    console.timeEnd('adjs redraw')

  _layoutCenters: ->

    # push Adjustable centers around to avoid overlaps

    # Todo: also don't overlap inlineattr boxes

    # Todo: don't let their connector lines cross each other

    @qt = d3.quadtree([], ((d)->d.e(1)), ((d)->d.e(2)))

    @qt.extent([[0,0], [8000,8000]])

    for _, adj of @adjs

      desired = adj.getSuggestedCenter()

      output = desired

      for tries in [0...4]

        nearest = @qt.find(output.e(1), output.e(2))

        if nearest

          dist = output.distanceFrom(nearest)

          if dist < 60

            away = output.subtract(nearest).toUnitVector()

            toScreenCenter = $V([500,200]).subtract(output).toUnitVector()

            output = output.add(away.x(60).add(toScreenCenter.x(10)))

      if -50 < output.e(1) < 20 # mostly for zoom-left

        output.setElements([

          Math.max(20, output.e(1)),

          output.e(2)])

      adj.centerOffset = output.subtract(adj.getTarget())

      output.adj = adj

      @qt.add(output)

  _drawConnector: (ctr, target) ->

    @ctx.strokeStyle = '#aaa'

    @ctx.lineWidth = 2

    @ctx.beginPath()

    Drawing.line(@ctx, ctr, target)

    @ctx.stroke()

  _drawAdjuster: (label, x1, y1, x2, y2) ->

    radius = 8

    @ctx.shadowColor = 'black'

    @ctx.shadowBlur = 15

    @ctx.shadowOffsetX = 5

    @ctx.shadowOffsetY = 9

    @ctx.fillStyle = 'rgba(255, 255, 0, 0.5)'

    @ctx.beginPath()

    Drawing.roundRect(@ctx, x1, y1, x2, y2, radius)

    @ctx.fill()

    @ctx.shadowColor = 'rgba(0,0,0,0)'

    @ctx.strokeStyle = 'yellow'

    @ctx.lineWidth = 2

    @ctx.setLineDash([3, 3])

    @ctx.beginPath()

    Drawing.roundRect(@ctx, x1, y1, x2, y2, radius)

    @ctx.stroke()

    @ctx.setLineDash([])

    @ctx.font = "12px sans"

    @ctx.fillStyle = '#000'

    @ctx.fillText(label, x1 + 5, y2 - 5, x2 - x1 - 10)

    # coords from a center that's passed in

    # # special layout for the thaeter ones with middinh 

    # l/r arrows

    # mouse arrow cursor upon hover, and accent the hovered adjuster

    # connector

    worldPts = []

    uris = @graph.objects(curve, @graph.Uri(':point'))

    for pt in uris

      tm = @graph.floatValue(pt, @graph.Uri(':time'))

      val = @graph.floatValue(pt, @graph.Uri(':value'))

      v = $V([xOffset + tm, val])

      v.uri = pt

      worldPts.push(v)

    worldPts.sort((a,b) -> a.e(1) > b.e(1))

    return [uris, worldPts]

  curveWidth: (worldPts) ->

    tMin = @graph.floatValue(worldPts[0].uri, @graph.Uri(':time'))

    tMax = @graph.floatValue(worldPts[3].uri, @graph.Uri(':time'))

    tMax - tMin

  deleteNote: (song, note, selection) ->

    patch = {delQuads: [{subject: song, predicate: graph.Uri(':note'), object: note, graph: song}], addQuads: []}

    @graph.applyAndSendPatch(patch)

    if note in selection.selected()

      selection.selected(_.without(selection.selected(), note))

class TimelineEditor extends Polymer.Element

  @is: 'light9-timeline-editor'

  @behaviors: [ Polymer.IronResizableBehavior ]

  @properties:

    viewState: { type: Object }

    debug: {type: String}

    graph: {type: Object, notify: true}

    project: {type: Object}

    setAdjuster: {type: Function, notify: true}

    playerSong: {type: String, notify: true}

    followPlayerSong: {type: Boolean, notify: true, value: true}

    song: {type: String, notify: true}

    show: {value: 'http://light9.bigasterisk.com/show/dance2017'}

    songTime: {type: Number, notify: true, observer: '_onSongTime'}

    songDuration: {type: Number, notify: true, observer: '_onSongDuration'}

    songPlaying: {type: Boolean, notify: true}

    fullZoomX: {type: Object, notify: true}

    zoomInX: {type: Object, notify: true}

    selection: {type: Object, notify: true}

  width: ko.observable(1)

  @listeners:

    'iron-resize': '_onIronResize'

  @observers: [

    'setSong(playerSong, followPlayerSong)',

    'onGraph(graph)',

    ]

  connectedCallback: ->

    super.connectedCallback()

    ko.options.deferUpdates = true;

    @selection = {hover: ko.observable(null), selected: ko.observable([])}

    window.debug_zoomOrLayoutChangedCount = 0

    window.debug_adjUpdateDisplay = 0

    @viewState =

      zoomSpec:

        duration: ko.observable(100) # current song duration

        t1: ko.observable(0) # need validation to stay in bounds and not go too close

        t2: ko.observable(100)

      cursor:

        t: ko.observable(20)

      mouse:

        pos: ko.observable($V([0,0]))

    @fullZoomX = d3.scaleLinear()

    @zoomInX = d3.scaleLinear()

    @setAdjuster = (adjId, makeAdjustable) =>

    #if anchor == loadtest

    #  add note and delete it repeatedly

    #  disconnect the graph, make many notes, drag a point over many steps, measure lag somewhere

  updateDebugSummary: ->

    elemCount = (tag) -> document.getElementsByTagName(tag).length

    @debug = "#{window.debug_zoomOrLayoutChangedCount} layout change,

     #{elemCount('light9-timeline-note')} notes,

     #{@selection.selected().length} selected

     #{elemCount('light9-timeline-graph-row')} rows,

     #{window.debug_adjsCount} adjuster items registered,

     #{window.debug_adjUpdateDisplay} adjuster updateDisplay calls,

    "

  zoomOrLayoutChanged: ->

    log('zoomOrLayoutChanged')

    # not for cursor updates

    vs = @viewState

    if vs.zoomSpec.t1() < 0

      vs.zoomSpec.t1(0)

    if vs.zoomSpec.duration() and vs.zoomSpec.t2() > vs.zoomSpec.duration()

      vs.zoomSpec.t2(vs.zoomSpec.duration())

    window.debug_zoomOrLayoutChangedCount++

    @fullZoomX.domain([0, vs.zoomSpec.duration()])

    @fullZoomX.range([0, @width()])

    # had trouble making notes update when this changes

    zoomInX = d3.scaleLinear()

    zoomInX.domain([vs.zoomSpec.t1(), vs.zoomSpec.t2()])

    zoomInX.range([0, @width()])

    @zoomInX = zoomInX

    # todo: these run a lot of work purely for a time change

    # cursor needs update when layout changes, but I don't want

    # zoom/layout to depend on the playback time

    setTimeout(@songTimeChanged.bind(@), 1)

  songTimeChanged: ->

    @$.cursorCanvas.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,

                              @$.zoomed.$.time.offsetTop,

                              @$.zoomed.$.time.offsetHeight,

                              @fullZoomX, @zoomInX, @viewState.cursor)

  trackMouse: ->

    # not just for show- we use the mouse pos sometimes

    for evName in ['mousemove', 'touchmove']

      @addEventListener evName, (ev) =>

        ev.preventDefault()

        # todo: consolidate with _editorCoordinates version

        if ev.touches?.length

          ev = ev.touches[0]

        @root = @getBoundingClientRect()

        @viewState.mouse.pos($V([ev.pageX - @root.left, ev.pageY - @root.top]))

        @$.cursorCanvas.setMouse(@viewState.mouse.pos())

        # should be controlled by a checkbox next to follow-player-song-choice

        @sendMouseToVidref() unless window.location.hash.match(/novidref/)

  sendMouseToVidref: ->

    now = Date.now()

    if (!@$.vidrefLastSent? || @$.vidrefLastSent < now - 200) && !@songPlaying

      @$.vidrefTime.body = {t: @latestMouseTime(), source: 'timeline'}

      @$.vidrefTime.generateRequest()

      @$.vidrefLastSent = now

  latestMouseTime: ->

    @zoomInX.invert(@viewState.mouse.pos().e(1))

  bindWheelZoom: (elem) ->

    elem.addEventListener 'mousewheel', (ev) =>

      zs = @viewState.zoomSpec

      center = @latestMouseTime()

      left = center - zs.t1()

      right = zs.t2() - center

      scale = Math.pow(1.005, ev.deltaY)

      zs.t1(center - left * scale)

      zs.t2(center + right * scale)

  forwardMouseEventsToAdjustersCanvas: ->

    ac = @$.adjustersCanvas

    @addEventListener('mousedown', ac.onDown.bind(ac))

    @addEventListener('mousemove', ac.onMove.bind(ac))

    @addEventListener('mouseup', ac.onUp.bind(ac))

  animatedZoom: (newT1, newT2, secs) ->

    fps = 30

    oldT1 = @viewState.zoomSpec.t1()

    oldT2 = @viewState.zoomSpec.t2()

    lastTime = 0

    for step in [0..secs * fps]

      frac = step / (secs * fps)

      do (frac) =>

        gotoStep = =>

          @viewState.zoomSpec.t1((1 - frac) * oldT1 + frac * newT1)

          @viewState.zoomSpec.t2((1 - frac) * oldT2 + frac * newT2)

        delay = frac * secs * 1000

        setTimeout(gotoStep, delay)

        lastTime = delay

    setTimeout(=>

        @viewState.zoomSpec.t1(newT1)

        @viewState.zoomSpec.t2(newT2)

      , lastTime + 10)  

  bindKeys: ->

    shortcut.add "Ctrl+P", (ev) =>

      @$.music.seekPlayOrPause(@latestMouseTime())

    zoomAnimSec = .1

    shortcut.add "Ctrl+Escape", =>

      @animatedZoom(0, @viewState.zoomSpec.duration(), zoomAnimSec)

    shortcut.add "Shift+Escape", =>

      @animatedZoom(@songTime - 2, @viewState.zoomSpec.duration(), zoomAnimSec)

    shortcut.add "Escape", =>

      zs = @viewState.zoomSpec

      visSeconds = zs.t2() - zs.t1()

      margin = visSeconds * .4

      # buggy: really needs t1/t2 to limit their ranges

      if @songTime < zs.t1() or @songTime > zs.t2() - visSeconds * .6

        newCenter = @songTime + margin

        @animatedZoom(newCenter - visSeconds / 2,

                      newCenter + visSeconds / 2, zoomAnimSec)

    shortcut.add "L", =>

      @$.adjustersCanvas.updateAllCoords()

    shortcut.add 'Delete', =>

      for note in @selection.selected()

    dia: { type: Object, notify: true }

    song: { type: String, notify: true }

    zoomInX: { type: Object, notify: true }

    zoom: { type: Object, notify: true, observer: 'onZoom' } # viewState.zoomSpec

    zoomFlattened: { type: Object, notify: true }

  @observers: [

    'onGraph(graph, setAdjuster, song, zoomInX, project)'

  ]

  @listeners: {'iron-resize': 'update'}

  update: ->

    @renderer.resize(@clientWidth, @clientHeight)

    @renderer.render(@stage)

  onZoom: ->

    updateZoomFlattened = ->

      log('updateZoomFlattened')

      @zoomFlattened = ko.toJS(@zoom)

    ko.computed(updateZoomFlattened.bind(@))

  constructor: ->

    super()

    @stage = new PIXI.Container()

    @renderer = PIXI.autoDetectRenderer({

         backgroundColor: 0xff6060,

    })

  connectedCallback: ->

    super.connectedCallback()

    @$.rows.appendChild(@renderer.view);

    # iron-resize should be doing this but it never fires

    setInterval(@update.bind(@), 1000)

  onGraph: ->

    @graph.runHandler(@gatherNotes.bind(@), 'zoom notes')

  gatherNotes: ->

    U = (x) => @graph.Uri(x)

    log('assign rows',@song, 'graph has', @graph.quads().length)

    graphics = new PIXI.Graphics({nativeLines: true})

    for uri in _.sortBy(@graph.objects(@song, U(':note')), 'uri')

      #should only make new ones

      # 

      child = new Note(@graph, @selection, @dia, uri, @setAdjuster, @song, @zoomInX)

      originTime = @graph.floatValue(uri, U(':originTime'))

      effect = @graph.uriValue(uri, U(':effectClass'))

      for curve in @graph.objects(uri, U(':curve'))

        if @graph.uriValue(curve, U(':attr')).equals(U(':strength'))

          [@pointUris, @worldPts] = @project.getCurvePoints(curve, originTime)

          curveWidthCalc = () => @_curveWidth(@worldPts)

          h = 150 #@offsetHeight

          screenPts = ($V([@zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * h]) for pt in @worldPts)

          graphics.beginFill(0xFF3300);

          graphics.lineStyle(4, 0xffd900, 1)

          graphics.moveTo(screenPts[0].e(1), screenPts[0].e(2))

          for p in screenPts.slice(1)

            graphics.lineTo(p.e(1), p.e(2))

         graphics.endFill()

     @rows = []#(new NoteRow(@graph, @dia, @song, @zoomInX, @noteUris, i, @selection) for i in [0...ROW_COUNT])

     @stage.children.splice(0)

     @stage.addChild(graphics)

     @renderer.render(@stage)

  onDrop: (effect, pos) ->

    U = (x) => @graph.Uri(x)

    return unless effect and effect.match(/^http/)

    # we could probably accept some initial overrides right on the

    # effect uri, maybe as query params

    if not @graph.contains(effect, RDF + 'type', U(':Effect'))

      if @graph.contains(effect, RDF + 'type', U(':LightSample'))

        effect = @project.makeEffect(effect)

      else

        log("drop #{effect} is not an effect")

        return

    dropTime = @zoomInX.invert(pos.e(1))

    desiredWidthX = @offsetWidth * .3

    desiredWidthT = @zoomInX.invert(desiredWidthX) - @zoomInX.invert(0)

    desiredWidthT = Math.min(desiredWidthT, @zoom.duration() - dropTime)

    @project.makeNewNote(effect, dropTime, desiredWidthT)

customElements.define(TimeZoomed.is, TimeZoomed)

class TimeAxis extends Polymer.Element

  @is: "light9-timeline-time-axis",

  # for now since it's just one line calling dia,

  # light9-timeline-editor does our drawing work.

customElements.define(TimeAxis.is, TimeAxis)