import shallowequal from 'shallowequal'
import * as React from 'react'

import {Container, Renderer} from '@avocado/graphics'
import {Vector} from '@avocado/math'

class ContainerComponent extends React.Component

  constructor: (props) ->

    super()

    @isDirty = true
    @renderer = new Renderer props.size, 'canvas'
    @container = new Container()

  @defaultProps: size: [0, 0]

  componentDidMount: ->

    @containerRef.appendChild @renderer.element()

    window.addEventListener 'resize', @recalculateBackgroundSize

  componentDidUpdate: ->

    # Performance: Check if the children actually changed after render.
    @isDirty = shallowequal @previousChildren, @container.children()

    # Tick the first time.
    return unless @isDirty

    @tick()
    @isDirty = false

  componentWillUnmount: ->

    window.removeEventListener 'resize', @recalculateBackgroundSize

    @renderer.destroy(); @renderer = null

  recalculateBackgroundSize: =>

    s = getComputedStyle @renderer.element()
    domSize = [s.width, s.height].map (n) -> parseInt n

    [w, h] = Vector.mul [16, 16], Vector.div domSize, @props.size
    @renderer.element().style.backgroundSize = "#{w}px #{h}px"

  render: ->

    # Literally one big side-effect.
    @renderer.resize @props.size
    @recalculateBackgroundSize()

    @previousChildren = @container.children()
    @container.removeChildren()
    children = React.Children.map @props.children, (child) =>

      React.cloneElement child,

        setIntoContainer: (renderable) =>

          return unless renderable
          @container.addChild renderable

        tickContainer: @tick

    <div
      className="container"
      ref={@setContainerRef}
      style={'lineHeight': 0}
    >{children}</div>

  setContainerRef: (@containerRef) => return

  tick: => @renderer.render @container

export default ContainerComponent