import Keyframes from '@keyframes/core';

import Proximity from '../src/keyframes.proximity';

Keyframes.plugin(Proximity);

const $ = selector => document.querySelectorAll(selector)[0];

const blockElem = $('.block');

const bc2 = $('.block-container.bc2').getBoundingClientRect();

const block = new Keyframes(blockElem);

const topPosition = {

top: '20px',

};

Keyframes.define([{

name: 'initiate',

'0%': {

top: '-100px',

},

'100%': topPosition,

}, {

name: 'makeTheMove',

'0%': topPosition,

'100%': {

top: `${bc2.top - 20}px`,

},

}]);

window.onload = function () {

let readyToProximity = false;

let isMoving = false;

let directionSwitch = true;

block.play('initiate 1s ease 0s 1 normal forwards', () => {

readyToProximity = true;

});

block.proximity((obj) => {

if (readyToProximity) {

blockElem.style.boxShadow = `red 0 0 ${0.5 * obj.distancePercentage}px`;

}

});

blockElem.addEventListener('mouseover', (e) => {

if (!isMoving) {

isMoving = true;

const direction = directionSwitch ? 'normal' : 'reverse';

directionSwitch = !directionSwitch;

block.reset(() => block.play(`makeTheMove 2s ease 0s 1 ${direction} forwards`, () => {

isMoving = false;

}));

}

});

};