import Rx, { Observable } from 'rxjs';
import Grid from './grid';
import Particle from './particle';
import Controls from './controls';
import { CONTROLS, ENTITIES } from './enums';

function Animation(observables, id) {
    this.id = id;
    this.observables = observables;
    this.particles = [];

    this.container = document.createElement('div');
    this.container.className = 'animationContainer';
    document.getElementById(id).appendChild(this.container);

    this.observables.animating$.subscribe(this.updateAnimating.bind(this));
    this.observables.count$.skip(1).subscribe(this.updateCount.bind(this));

    // observables.circle$,  PROBABLY WON'T NEED THESE, WILL BE In PARTICLE
    // observables.randomize$,
    // observables.speed$

    // this.observables.count$.next(99);

    //<div class='animationContainer'></div>

    // console.warn("Mounting Animation", this.id);

    // console.warn('updateAnimating in Animation', isAnimating)
    // this.isAnimating = isAnimating;
    // if (isAnimating) {
    //     const fps$ = Rx.Observable.interval(1000 / 32)
    //         .takeWhile(_ => this.isAnimating);
    //
    //     fps$.subscribe(this.nextFrame.bind(this));
    // }

    // this.container = container;
    // this.particles = [];
    // this.isAnimating = false;
    // this.config = config;
    // this.grid = new Grid();

    // this.updateAnimating(false);
    // this.updateCircle(config.circleControl);
    // this.updateSpeed(config.speed);
    // this.updateRandomize(this.config.randomizeControl);

    // Must be last, after configs all set up and container is fully rendered.
    // this.updateCount(this.config.count);
}

Animation.prototype.updateAnimating = function(isAnimating) {
    if (isAnimating === false) {
        return;
    }

    const fps$ = Rx.Observable.interval(1000 / 32)
        .takeUntil(this.observables.animating$);

    fps$.subscribe(this.nextFrame.bind(this));
}

Animation.prototype.nextFrame = function() {
    this.particles.forEach(p => {
        const prevX = p.arc.endX;
        const prevY = p.arc.endY;

        p.nextFrame();

        // this.grid.deletePoint({ x: prevX, y: prevY, type: ENTITIES.PARTICLE });
        // this.grid.setPoint({ x: p.arc.endX, y: p.arc.endY, type: ENTITIES.PARTICLE }, p);
    });
}

Animation.prototype.updateCount = function(count) {
    const bounds = this.container.getBoundingClientRect();

    while (this.particles.length > count) {
        const p = this.particles.pop();
        p.remove();
    }

    while (this.particles.length < count) {
        const p = new Particle(this.container, bounds, this.config, this.grid);
        this.particles.push(p);
    }
}

Animation.prototype.updateSpeed = function(value) {
    // Options must be stored; they are passed to new particles.
    this.config.speed = value;
    this.particles.forEach(p => p.updateConfig({ speed: value }));
}

Animation.prototype.updateCircle = function(value) {
    this.config.showMovementCircle = value;
    this.particles.forEach(p => p.updateConfig({ showMovementCircle: value }));
}

Animation.prototype.updateRandomize = function(value) {
    this.config.randomize = value;
    this.particles.forEach(p => p.updateConfig({ randomize: value }));
}

export default Animation;