import React, { Component } from 'react'

import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS, INNER_HEIGHT } from 'app/constants'
import { timestamp } from 'app/utils'

export default class Ticks extends Component {
  render() {
    let { start_ts, zoom, duration } = this.props.timeline

    let secondsPerPixel = ZOOM_STEPS[zoom] * 0.1 // 0.1 sec / step

    let widthTimeDuration = INNER_HEIGHT * secondsPerPixel // secs per pixel

    let timeMin = start_ts
    let timeMax = Math.min(start_ts + widthTimeDuration, duration)
    let timeWidth = timeMax - timeMin

    let pixelMin = timeMin / secondsPerPixel

    let secondsPerLabel = ZOOM_LABEL_STEPS[zoom] // secs
    let pixelsPerLabel = secondsPerLabel / secondsPerPixel
    let secondsPerTick = ZOOM_TICK_STEPS[zoom]
    let pixelsPerTick = secondsPerTick / secondsPerPixel

    let startOffset = pixelsPerLabel - (pixelMin % pixelsPerLabel)
    let startTiming = (pixelMin + startOffset) * secondsPerPixel

    let labelCount = Math.ceil(INNER_HEIGHT / pixelsPerLabel) + 1
    let offset, timing, tickLabels = [], ticks = []
    for (var i = -1; i < labelCount; i++) {
      offset = i * pixelsPerLabel + startOffset
      if (offset > INNER_HEIGHT) continue
      timing = i * secondsPerLabel + startTiming
      if (timing > duration) {
        break
      }
      tickLabels.push(
        <div className='tickLabel' key={"tickLabel_" + i}
          style={{
            top: Math.floor(offset)
          }}>
          {timestamp(timing)}
        </div>
      )
    }

    let durationOffset = duration / secondsPerPixel - pixelMin
    if (timing > duration) {
      tickLabels.push(
        <div className='tickLabel tickLabelTotal' key={"tickLabel_total"}
          style={{
            top: durationOffset
          }}>
          {timestamp(duration, 1)}
        </div>
      )
      ticks.push(
        <div className='tick' key={"tick_total"}
          style={{
            top: Math.floor(durationOffset),
          }}
        />
      )
    }
    let tickCount = Math.ceil(INNER_HEIGHT / pixelsPerTick) + 6
    for (var i = 0; i < tickCount; i += 1) {
      offset = i * pixelsPerTick + startOffset - pixelsPerLabel
      if (offset > durationOffset) {
        break
      }
      ticks.push(
        <div className='tick' key={"tick_" + i}
          style={{
            top: Math.floor(offset),
          }}
        />
      )
    }
    // console.log(ticks.length)

    return (
      <div className='ticks'>
        {ticks}
        {tickLabels}
      </div>
    )
  }
}