const container = document.querySelector('.particles');
const containerBounds = container.getBoundingClientRect();

const DOM = {
    container,
    containerBounds,

    getEventOffsetCoords: (evt, containerCoords) => {
        const { pageX, pageY } = evt;

        return {
            evtX: (pageX - containerCoords.left),
            evtY: (pageY - containerCoords.top)
        };
    },

    highlight: (evt) => {
        const { evtX, evtY } = DOM.getEventOffsetCoords(evt, DOM.containerBounds);

        const highlightDiv = document.createElement('div');
        highlightDiv.className = 'highlight';
        highlightDiv.style.left = `${evtX}px`;
        highlightDiv.style.top = `${evtY}px`;

        DOM.container.appendChild(highlightDiv);
        setTimeout(() => { DOM.container.removeChild(highlightDiv); }, 500);
    },

    // calcBounds: () => {
    //     DOM.containerBounds = container.getBoundingClientRect();
    // },
};

export default DOM;