# This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
LeeryEscribirWizard = ->
  @datos = leer_y_escribir_test
  @respondidas = []
  @posiciones = {}

  @inicializar = ->
    respondidasObs = ko.getObservable(this, 'respondidas')
    respondidasObs.subscribe (newValue) =>
      @actualizarSlider()

    @prepararAnimaciones()
    @reiniciar()

  @reiniciar = ->
    $(".pregunta_grupo, .resultado, #hormiga, #slider_luz").hide()
    TweenMax.set "#inicio, #inicio_globo, #intelectual, #nene_con_ideas", {clearProps: "all"}
    @respondidas.length = 0
    @actualizarSlider()

  ## Guarda la posición actual del objeto
  @guardarPosicionActual = (selector) ->
    $obj = $(selector)

    if ($obj.length > 1)
      @guardarPosicionActual obj for obj in $obj
    else
      item = {}
      item.$obj = $obj
      item.css = item.$obj.css(["left", "top"])
      @posiciones[$obj.prop('id')] = item

  ## Crea las funciones de la animación correspondiente a la pregunta
  @crearFuncionAnimacionPregunta = (item) ->
    $pregunta_grupo = item.$obj.children("div")
    $pregunta = $pregunta_grupo.children("div")
    $respuestas = $pregunta_grupo.find("li")
    $anterior = item.$obj.children("button")

    animarIn = (item) ->
      item.$obj.show()
      TweenMax.set item.$obj, {clearProps: "all"}
      TweenMax.set $pregunta_grupo, {clearProps: "all"}
      # TweenMax.from $pregunta_grupo, 1, {y: -100, autoAlpha: 0, scale: 0, ease:Linear.easeNone}

      TweenMax.set $pregunta, {clearProps: "all"}
      TweenMax.from $pregunta, 1, {y: -100, autoAlpha: 0, scale: 0, ease:Linear.easeNone}

      TweenMax.set $respuestas, {clearProps: "all"}
      TweenMax.staggerFrom $respuestas, 0.5, {x: 500, autoAlpha: 0, ease:Linear.easeNone, delay: 1}, 0.5

      TweenMax.set $anterior, {clearProps: "all"}
      TweenMax.from $anterior, 0.5, {autoAlpha: 0, x: -200, ease:Linear.easeNone}

    animarOut = (item) ->
      $anterior.hide()
      TweenMax.to item.$obj, 1, {
        ease:Linear.easeNone, y: 500, rotation: 360, onComplete: ->
          item.$obj.hide()
      }

    item.animarIn = () ->
      animarIn(item)
    item.animarOut = () ->
      animarOut(item)

  @crearFuncionAnimacionConclusion = (item) ->
    $resultado_placa = item.$obj.children("div.resultado_placa")
    $resultado_marco = item.$obj.children("div.resultado_marco")
    $conclusiones = $resultado_marco.find("p")
    $reiniciar = $resultado_placa.children("button.reiniciar")

    animarIn = (item) ->
      item.$obj.show()
      TweenMax.set item.$obj, {clearProps: "all"}
      TweenMax.set $resultado_placa, {clearProps: "all"}
      TweenMax.from $resultado_placa, 1, {autoAlpha: 0, scale: 0, rotation: 360, ease:Linear.easeNone}

      TweenMax.set $resultado_marco, {clearProps: "all"}
      TweenMax.from $resultado_marco, 1, {y: -100, autoAlpha: 0, scale: 0, ease:Linear.easeNone}

      TweenMax.set $conclusiones, {clearProps: "all"}
      TweenMax.staggerFrom $conclusiones, 0.5, {x: 500, autoAlpha: 0, ease:Linear.easeNone, delay: 1}, 0.5

      TweenMax.set $reiniciar, {clearProps: "all"}
      TweenMax.from $reiniciar, 0.5, {autoAlpha: 0, x: -200, ease:Linear.easeNone}

    animarOut = (item) ->
      TweenMax.to item.$obj, 1, {
        ease:Linear.easeNone, y: 500, scale: 0, autoAlpha: 0, onComplete: ->
          item.$obj.hide()
      }

    item.animarIn = () ->
      animarIn(item)
    item.animarOut = () ->
      animarOut(item)

  @prepararAnimaciones = () ->
    @guardarPosicionActual selector for selector in [ ".pregunta_grupo", ".resultado", "#slider_linea_progreso" ]

    preguntas = (@posiciones["pregunta_#{paso.id}_bloque"] for paso in @datos.pasos when !(paso.conclusion) )
    @crearFuncionAnimacionPregunta pregunta for pregunta in preguntas

    conclusiones = (@posiciones["conclusion_#{paso.id}_bloque"] for paso in @datos.pasos when paso.conclusion)
    @crearFuncionAnimacionConclusion conclusion for conclusion in conclusiones

  ## arranca con el wizard
  @comenzarCuestionario = ->
    TweenMax.staggerTo "#nene_con_ideas, #inicio, #inicio_globo", 1, {autoAlpha: 0, scale: 0}

    TweenMax.to "#intelectual", 1, {left: -15, top: 140, scaleY: 0.6, scaleX: -0.6}

    $slider_luz = $("#slider_luz")
    TweenMax.set $slider_luz, {clearProps: "all"}
    TweenMax.from $slider_luz, 1, {autoAlpha: 0, scale: 0}

    $("#hormiga").show()
    TweenMax.set "#hormiga", {clearProps: "all"}
    TweenMax.from "#hormiga", 1, {autoAlpha: 0, scale: 0}

    @proximoPaso 1 #por ser la primera

  ## la próxima pregunta
  @proxima = ( respuesta, pregunta, index_pregunta ) ->
    # @limpiarRespuesta pregunta.orden

    @respondidas.push({
      pregunta_id: pregunta.id,
      respuesta_opcion: respuesta.opcion,
      pregunta: pregunta,
      respuesta: respuesta })

    @posiciones["pregunta_#{pregunta.id}_bloque"].animarOut()
    @proximoPaso respuesta.proximo_paso

  @proximoPaso = (paso_id) ->
    proximo_paso = _.find @datos.pasos, (item) ->
      item.id == paso_id

    # usar la respuesta seleccionada, no la pregunta
    if (_.has(proximo_paso, "pregunta"))  # también podría verificarse si hubiera conclusión
      # me muevo a la próxima pregunta
      @posiciones["pregunta_#{paso_id}_bloque"].animarIn()
    else
      @posiciones["conclusion_#{paso_id}_bloque"].animarIn()
      @mostrarResultado()

  # vuelve para atrás la pregunta actual y resetea la respuesta
  @anterior = ( pregunta ) ->
    respondida = @respondidas.pop()
    @posiciones["pregunta_#{respondida.respuesta.proximo_paso}_bloque"].animarOut()
    @posiciones["pregunta_#{respondida.pregunta_id}_bloque"].animarIn()

  # muestra los resultados al final de todas las preguntas
  @mostrarResultado = ->
    TweenMax.to "#intelectual", 1, {scaleX: -1, scaleY: 1, top: 140, left: 20}
    TweenMax.staggerTo "#slider_luz, #hormiga", 1, {autoAlpha: 0, scale: 0}

  @actualizarSlider = ->
    console.log("@actualizarSlider", @respondidas)
    # máximo es 350px
    $slider_linea_progreso = @posiciones["slider_linea_progreso"]
    if (@respondidas && $slider_linea_progreso)
      startLeftPos = parseInt($slider_linea_progreso.css.left, 10)
      distanciaPorRecorrer = 350 - startLeftPos
      # ponemos una menos porque el final ya no nos importa, son los resultados
      preguntasArray = (paso for paso in @datos.pasos when !(paso.conclusion))
      cantRespondida = @respondidas.length
      totalPreguntas = _.max [preguntasArray.length, cantRespondida]
      console.log "totalPreguntas", totalPreguntas
      distanciaPorRespuesta = (distanciaPorRecorrer / totalPreguntas)
      distanciaRecorrida = startLeftPos + (distanciaPorRespuesta * cantRespondida)
      $slider = $("#slider_linea_progreso")
      console.log "animate para a #{distanciaRecorrida} porque hay #{cantRespondida} respondidas"
      TweenMax.to $slider, .5, {left: distanciaRecorrida}

  @resultado = ->
    puntosAcumulados = 0

    @contarResultados = (respondida) ->
      puntosAcumulados += respondida.respuesta.puntos

    @contarResultados respondida for respondida in @respondidas

    resultado = _.find @datos.max_respuestas, (item) ->
      item.puntos_desde <= puntosAcumulados && item.puntos_hasta > puntosAcumulados

    resultado.puntosAcumulados = puntosAcumulados

    console.log "puntosAcumulados #{puntosAcumulados}"

    resultado

  ko.track this

# ---------------------------------------------------------------------------------------------
# Activates knockout.js
ko.punches.enableAll()
model = new LeeryEscribirWizard()
ko.applyBindings model

model.inicializar()