// Join mechanic, multiple particles.
// Goal: per-frame decisions
// 20 x 20 grid
import Rx, { Observable } from 'rxjs';
import AnimationBase from './animation0';
import DOM from './dom';
import Store from './store';
//
// const evtScare = (detail) => new CustomEvent('scare', { detail });
// const evtMove = (detail) => new CustomEvent('move', { detail });
//
// const [particles, state] = (new Array(5)).fill(null).reduce((acc, v, i) => {
//     // const div = document.createElement('div');
//     // div.className = 'anim3-particle';
//     // div.innerHTML = ''
//     //
//     // const x = 0;
//     // const y = i * 20;
//     //
//     // div.style.left = 0
//     // div.style.top = `${y}px`;
//     //
//     // acc[0].push(div);
//     // acc[1].push({ x, y });
//     //
//     // acc[1][`${x}-${y}`] = { occupied: true, type: 'palette', x, y, i };
//     //
//     // return acc;
// }, [[], []]);
//
// const palettes = (new Array(1)).fill(null).reduce((acc, v, i) => {
//     const initialX = 200;
//     const initialY = 200;
//     const w = 167;
//     const h = 100;
//     const maxX = initialX + w;
//     const maxY = initialY + h;
//     const s = 20;
//
//     for (let y = initialY; y < maxY; y += s) {
//         for (let x = initialX; x < maxX; x += s) {
//             state[`${x}-${y}`] = { occupied: true, type: 'palette', i };
//         }
//     }
//
//     const div = document.createElement('div');
//     div.className = 'palette';
//     div.style.left = `${initialX}px`;
//     div.style.top = `${initialY}px`;
//
//     acc.push(div);
//
//     return acc;
// }, []);
//
// function scare(evt) {
//     const bounds = DOM.container.getBoundingClientRect();
//     const { evtX: x, evtY: y } = DOM.getEventOffsetCoords(evt, bounds);
//     const scareRadius = 50;
//
//     state.forEach((coord, i) => {
//         const diffX = Math.abs(coord.x - x + 10);
//         const diffY = Math.abs(coord.y - y + 10);
//
//         if (diffX < scareRadius && diffY < scareRadius) {
//             coord.lastScare = { x, y }  // TODO set state with last scare, then judge per frame based on that number to avoid jump
//             DOM.container.dispatchEvent(evtScare({ x, y, i }));
//         }
//     });
// }
//
// function move(evt) {
//
// }
//
// function flee(evt) {
//     particles[evt.detail.i].innerHTML = 'S'
//     DOM.addClass(particles[evt.detail.i], 'scared');
//     const p = particles[evt.detail.i];
//     DOM.container.dispatchEvent(evtMove(evt.detail));
//
//     setTimeout(() => {
//         p.innerHTML = '';
//         DOM.removeClass(p, 'scared');
//     }, 1000);
// }
//
function reset() {
//     while (DOM.container.childNodes.length) {
//         DOM.container.removeChild(DOM.container.firstChild);
//     }
//
//     particles.forEach((div) => {
//         div.innerHTML = '';
//         DOM.container.appendChild(div)
//     });
//
//     palettes.forEach((div) => {
//         DOM.container.appendChild(div)
//     });
};

function init() {
//     reset();
//
//     const click$ = Rx.Observable.fromEvent(DOM.container, 'click');
//     const scare$ = Rx.Observable.fromEvent(DOM.container, 'scare').auditTime(100);
//     const move$ = Rx.Observable.fromEvent(DOM.container, 'move');
//
//     click$.subscribe(scare);
//     scare$.subscribe(flee);
//     move$.subscribe(console.info);
};

const Animation5 = Object.assign({}, AnimationBase, { init, reset });

export default Animation5;