import React, { Component } from 'react'

import { ZOOM_STEPS, ZOOM_TICK_INTERVAL } from '../constants'
import { timestamp } from '../../../util'

export default class Ticks extends Component {
  render() {
    let { start_ts, zoom, duration } = this.props.timeline
    start_ts = 65.0
    duration /= 10
    zoom = 2
    const width = window.innerWidth

    let secondsPerPixel = ZOOM_STEPS[zoom] / 10 // 0.1 sec / step
    let pixelTimeDuration = 1 / secondsPerPixel // secs per pixel
    let widthTimeDuration = width / pixelTimeDuration // secs per pixel
    console.log(secondsPerPixel, pixelTimeDuration)
    console.log('width in seconds', widthTimeDuration)

    let secondsPerTick = ZOOM_STEPS[zoom] * 10 // secs
    let pixelsPerTick = secondsPerTick * pixelTimeDuration
    console.log('pixels per tick', pixelsPerTick)

    let labelSpacing = pixelsPerTick
    let subdivision = secondsPerTick
    while (labelSpacing < 200) {
      labelSpacing *= 2
      subdivision *= 2
    }

    console.log('start ts', start_ts)
    let pixelOffset = (start_ts / secondsPerPixel)
    let pixelRemainder = pixelOffset % labelSpacing
    // let startOffset = pixelsPerTick - (startTiming % pixelsPerTick)
    let startOffset = labelSpacing - pixelRemainder
    let startTiming = (pixelOffset + startOffset) * secondsPerPixel

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

    // tickLabels.push(
    //   <div className='tickLabel tickLabelTotal' key={"tickLabel_total"}
    //     style={{
    //       left: width
    //     }}>
    //     {timestamp(duration, 1)}
    //   </div>
    // )
    // for (var i = 0; i < minuteCount; i += 1) {
    //   offset = i * labelSpacing
    //   timing = i * subdivision
    //   ticks.push(
    //     <div className='tick' key={"tick_" + i}
    //       style={{
    //         left: Math.floor(offset),
    //       }}
    //     />
    //   )
    // }
    return (
      <div className='ticks'>
        {ticks}
        {tickLabels}
      </div>
    )
  }
}