import Rx, { Observable } from 'rxjs';

const Animation2 = {
    init: () => {
        const container = document.querySelector('.particles');
        const { left: containerX, top: containerY } = container.getBoundingClientRect();

        const state = { x: 0, y: 75 };

        const particleDivs = Array.apply(null, { length: 1 }).map((v, i) => {
            const div = document.createElement('div');
            div.className = 'particle';
            // div.style.top = `${i * 75}px`;
            // div.style.left = 0;
            div.style.top = `${state.y}px`;
            div.style.left = `${state.x}px`;

            container.appendChild(div);
            return div;
        });

        const evtScare = new CustomEvent("scare");

        const strFps = Rx.Observable.interval(1000 / 32);
        const strParticles = Rx.Observable.from(particleDivs);
        const strScare = Rx.Observable.fromEvent(container, 'scare');

        strScare.subscribe(console.log)

        const strClick = Rx.Observable
            .fromEvent(container, 'click');

        strClick.subscribe(evt => {
            const { pageX, pageY } = evt;
            const offsetX = pageX - containerX;
            const offsetY = pageY - containerY;
            const diffX = Math.abs(state.x - offsetX);
            const diffY = Math.abs(state.y - offsetY);

            if (diffX < 50 && diffY < 50) {
                container.dispatchEvent(evtScare);
            }
        });
    },
};

export default Animation2;