import React, { Component } from 'react';
import './App.css';
import SolarDisplay from './SolarDisplay/SolarDisplay'
import AList from './aList/aList'
import ajaxAdapter from './../helpers/AJAXAdapter'

class App extends Component {
  constructor() {
    super()
    this.zoomDone = false;
    this.timeoutId = 0;
    this.resetScale = .02;
    this.state = {
      distanceScale: .02,
      asteroids: [],
      navSelect: ''
    }
  }
  getToday() {
    ajaxAdapter.getAToday()
    .then((data) => {
      this.setState({
        today: data
      })
    })
  }
  getAllAsteroids() {
    ajaxAdapter.getAllAsteroids()
    .then((asteroids) => {
      this.setState({
        asteroids,
        navSelect: 'Today'
      })
    })
  }
  handleNavClick(navSelect) {
    console.log(navSelect);
    this.setState({
      navSelect
    })
  }
  handleAsteroidClick(asteroidDist, selected) {
    this.zoomDone = true;
    window.clearTimeout(this.timeoutId)
    this.setState({
      selected: selected
    })
    let calcNewDist = asteroidDist * this.state.distanceScale;
    const animateFramesOut = (time) => {
      calcNewDist = asteroidDist * this.state.distanceScale
      if(asteroidDist > 225000*3) {
        if(calcNewDist >= window.innerWidth * 3) {
          this.setState({
            distanceScale: this.state.distanceScale - .00005
          })
          calcNewDist = asteroidDist * this.state.distanceScale;
        } else if(calcNewDist >= window.innerWidth/2){
          this.setState({
            distanceScale: this.state.distanceScale - .000001
          })
          calcNewDist = asteroidDist * this.state.distanceScale;
        } else {
          this.zoomDone = true;
        }
      } else if(calcNewDist > window.innerWidth/2){
        this.setState({
          distanceScale: this.state.distanceScale - .00005
        })
        calcNewDist = asteroidDist * this.state.distanceScale;
      } else {
        this.zoomDone = true;
      }
      if(!this.zoomDone) {
        requestAnimationFrame(animateFramesOut)
      }
    }
    const animateFramesIn = (time) => {
      calcNewDist = asteroidDist * this.state.distanceScale;
      if(calcNewDist < window.innerWidth / 2) {
        if(calcNewDist > window.innerWidth / 10) {
          this.setState({
            distanceScale: this.state.distanceScale + .000001
          })
          calcNewDist = asteroidDist * this.state.distanceScale;
        } else {
          this.setState({
            distanceScale: this.state.distanceScale + .00005
          })
          calcNewDist = asteroidDist * this.state.distanceScale;
        }
      } else {
        this.zoomDone = true;
      }
      if(!this.zoomDone) {
        requestAnimationFrame(animateFramesIn)
      }
    }
    const pauseResetZoom = () => {
      this.timeoutId = window.setTimeout(() => {
        this.zoomDone = false;
        if(calcNewDist > window.innerWidth/2) {
          requestAnimationFrame(animateFramesOut)
        } else {
          requestAnimationFrame(animateFramesIn)
        }
      }, 70)
    }
    pauseResetZoom()
  }
  handleZoomInClick() {
    this.zoomDone = true;
    const animateZoomOut = () => {
      if(Math.round(this.state.distanceScale * 1000) / 1000 < this.resetScale) {
        this.setState({
          distanceScale: this.state.distanceScale + .00005
        })
        if(!this.zoomDone) {
          requestAnimationFrame(animateZoomOut)
        }
      } else {
        this.zoomDone = true;
      }
    }
    window.setTimeout(() => {
      this.zoomDone = false;
      requestAnimationFrame(animateZoomOut)
    }, 70)
  }
  componentDidMount() {
    this.getAllAsteroids()
  }
  render() {
    return (
      <div className="bodyContainer">
        <SolarDisplay
          navSelect={this.state.navSelect}
          asteroidList={this.state.asteroids}
          sizeScale={this.state.distanceScale}
          distanceScale={this.state.distanceScale}
          selected={this.state.selected}
          handleZoomInClick={() => this.handleZoomInClick()}
        />
        <AList
          navSelect={this.state.navSelect}
          selected={this.state.selected}
          asteroidList={this.state.asteroids}
          distanceScale={this.state.distanceScale}
          handleNavClick={(tab) => this.handleNavClick(tab)}
          handleAsteroidClick={(asteroidDist, selected) => this.handleAsteroidClick(asteroidDist, selected)}
        />
      </div>
    );
  }
}

export default App;
