import React, { Component } from 'react'

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

export default class Ticks extends Component {
  render() {
    let { start_ts, zoom, duration } = this.props.timeline
    duration /= 10
    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_LABEL_STEPS[zoom] // secs
    let pixelsPerLabel = secondsPerTick * pixelTimeDuration
    let pixelsPerTick = ZOOM_TICK_STEPS[zoom]
    console.log('pixels per label', pixelsPerLabel)

    let subdivision = secondsPerTick
    while (pixelsPerLabel < 200) {
      pixelsPerLabel *= 2
      pixelsPerTick *= 2
      subdivision *= 2
    }
    if (subdivision > 60) {

    }

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

    let labelCount = Math.ceil(width / pixelsPerLabel)
    let offset, timing, tickLabels = [], ticks = []
    for (var i = -1; i < labelCount; i++) {
      offset = i * pixelsPerLabel + startOffset - 20
      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>
      )
    }

    let durationOffset = duration / secondsPerPixel - pixelOffset
    if (timing > duration) {
      tickLabels.push(
        <div className='tickLabel tickLabelTotal' key={"tickLabel_total"}
          style={{
            left: durationOffset - 20
          }}>
          {timestamp(duration, 1)}
        </div>
      )
      ticks.push(
        <div className='tick' key={"tick_total"}
          style={{
            left: Math.floor(durationOffset),
          }}
        />
      )
    }
    let tickCount = Math.ceil(width / pixelsPerTick) + 1
    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={{
            left: Math.floor(offset),
          }}
        />
      )
    }
    console.log(ticks.length)

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