import Rx, { Observable } from 'rxjs';
import Particle from './particle';
import Store from './store';

function Animation1(node) {
    this.container = node;
    this.bounds = node.getBoundingClientRect();
}

// const grid = {};
// for (let x = 0; x <= 600; x += 5) {
//     grid[x] = {};
//     for (let y = 0; y <= 600; y += 5) {
//         grid[x][y] = { type: null };
//
//         if (x === 0 || y === 0 || x === 600 || y === 600) {
//             grid[x][y] = { type: 'wall' };
//         }
//     }
// }

Animation1.prototype.nextFrame = function() {
    this.particles.forEach(p => p.nextFrame());
}

Animation1.prototype.reset = () => {
    // while (DOM.container.childNodes.length) {
    //     DOM.container.removeChild(DOM.container.firstChild);
    // }
};

Animation1.prototype.init = function() {
    this.particles = Array(1).fill().map(_ => new Particle(this.container, this.bounds));

    const stop$ = Rx.Observable.fromEvent(this.container, 'stop');

    // Change animation speed
    // Change animal pic
    // Enable random radius changes
    // Enable random rotation changes
    // Show movement circle
    // Show vision grid (including touches!)
    // Start / stop

    console.error("Click container to stop.");
    const fps$ = Rx.Observable.interval(1000 / 32)
        .takeUntil(stop$)
        .finally(() => { console.error("Stopped."); })

    const click$ = Rx.Observable.fromEvent(this.container, 'click');
    click$.subscribe(() => {
        this.container.dispatchEvent(new CustomEvent('stop'));
    });

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

export default Animation1;