// Initializing the eye icon <i> element
const eye = document.getElementById("views")?.getElementsByTagName("i")[0];

if (eye instanceof HTMLElement) {
	// Initialized the eye icon <i> element

	// Initializing offset from the left
	let left = 7;

	// Initializing offset from the bottom
	let bottom = 3;

	// Initializing speed of the movement
	let transition = 0.7;

	// Initializing the counter of views <span> element
	const counter = eye.previousElementSibling;

	// Initializing the eye visibility area <div> element
	const visibility = eye.nextElementSibling;

	// Initializing status of found the mouse cursor
	let found = false;

	// Initializing status of registerd the mouse cursor
	let registered = false;

	// Initializing offended status
	let offended = false;

	// Initializing amount of punches
	let punches = 0;

	// Initializing status of completely offendeding
	let enemies = false;

	// Initializing register of processes
	const processes = {};

	// Declaring functions for event listeners for the eye visibility area
	let mouseenter, mousemove, mouseleave;

	// Declaring functions for event listeners for the eye
	let mousedown;

	// Declaring functions for event listeners for the document
	let _mousemove;

	// Initializing function for event listener of "mouseenter" on the eye visibility area
	mouseenter = () => {
		// The mouse cursor enter the eye visibility area

		if (!registered) {
			// The mouse cursor is not registered

			// Stopping the process of registering
			clearTimeout(processes.registering);

			// Starting the process of registering
			processes.registering = setTimeout(() => {
				// Increasing the counter of views
				counter.innerText = ++counter.innerText;

				// Writing status that the mouse cursor is registered
				registered = true;
			}, Math.random() * 1200);
		}
	};

	// Initializing event listener of "mouseenter" on the eye visibility area
	visibility.addEventListener("mouseenter", mouseenter);

	// Initializing function for event listener of "mousedown" on the eye
	mousedown = () => {
		// The mouse cursor clicked over the eye

		// Stopping the process of registering
		clearTimeout(processes.registering);

		if (offended && ++punches > 2) {
			// The eye has been punched many times

			// Stopping the process of forgiving
			clearTimeout(processes.forgiving);

			// Stopping the proccess of pupil movement
			clearInterval(processes.moving);

			// Stopping the proccess of timeout befor starting changing pupil movement speed
			clearTimeout(processes.pretransition);

			// Stopping the proccess of changing pupil movement speed
			clearInterval(processes.transition);

			// Initializing event listener of "mousemove" on the document
			document.removeEventListener("mousemove", _mousemove);

			if (!enemies) {
				// The eye is not completely offended

				// Writing status of completely offended
				enemies = true;

				if (registered) {
					// The mouse cursor is registered

					// Stopping the process of registering
					clearTimeout(processes.registering);

					// Decreasing the counter of views
					counter.innerText = --counter.innerText;
				}

				// Deinitializing event listener of "mouseenter" on the eye visibility area
				visibility.removeEventListener("mouseenter", mouseenter);

				// Deinitializing event listener of "mousedown" on the eye
				eye.removeEventListener("mousedown", mousedown);

				// Deinitializing event listener of "mousemove" on the eye visibility area
				visibility.removeEventListener("mousemove", mousemove);

				// Deinitializing event listener of "mouseleave" on the eye visibility area
				visibility.removeEventListener("mouseleave", mouseleave);
			}
		} else {
			// The eye has been punched small amount of times

			// Writing offended status
			offended = true;

			// Closing the eye
			eye.classList.add("offended");

			// Stopping the process of forgiving
			clearTimeout(processes.forgiving);

			// Starting the process of forgiving (from 2000ms to 5000ms)
			processes.forgiving = setTimeout(() => {
				// Writing offended status
				offended = false;

				// Opening the eye
				eye.classList.remove("offended");
			}, Math.random() * 3000 + 2000);
		}
	};

	// Initializing event listener of "mousedown" on the eye
	eye.addEventListener("mousedown", mousedown);

	// Initializing function for event listener of "mousemove" on the eye visibility area
	mousemove = (event) => {
		// The mouse cursor moving over the eye visibility area

		// Stopping the proccess of losting the mouse cursor
		clearTimeout(processes.losting);

		// Stopping the proccess of the eye relaxing
		clearTimeout(processes.relaxing);

		// Writing status that the mouse cursor entered the eye visibility area
		found = true;

		// Writing transition time for smooth eyelid opening and pupil constriction
		eye.style.setProperty("--transition", "0.2s");

		// Opening of the eyelids and constriction of the pupil
		eye.classList.add("expanded", "excited");

		if (!enemies) {
			// The cursor is not completely offended

			// Writing direction of the pupil towards the mouse (percentage ratio by position on the eye visibility area)
			// 13 is maximum margin from the left; 2 is minimum margin from the left
			// "+ 1" at the end is becouse the pupil is shrinked by 2 pixels
			eye.style.setProperty(
				"--left",
				// 2 + Math.round(((13 - 2) / 100) * ((event.offsetX / visibility.offsetWidth) * 100)) + 1 + "px"
				3 +
					Math.round(
						(11 / 100) * ((event.offsetX / visibility.offsetWidth) * 100),
					) +
					"px",
			);

			// Writing direction of the pupil towards the mouse (percentage ratio by position on the eye visibility area
			// 7 is maximum margin from the bottom; -1 is minimum margin from the bottom
			eye.style.setProperty(
				"--bottom",
				// 7 - Math.round(((7 - -1) / 100) * ((event.offsetY / visibility.offsetHeight) * 100)) + "px"
				7 -
					Math.round(
						(8 / 100) * ((event.offsetY / visibility.offsetHeight) * 100),
					) +
					"px",
			);

			// Initializing offset by the coordinates of the cursor position relative to the eye visibility area
			const x = -(visibility.offsetWidth / 2 - event.offsetX);
			const y = visibility.offsetHeight / 2 - event.offsetY;

			// Writing offset by the coordinates of the cursor position relative to the eye visibility area
			eye.style.setProperty("--offset-x", y / 2 + "deg");
			eye.style.setProperty("--offset-y", x / 2 + "deg");
		}
	};

	// Initializing event listener of "mousemove" on the eye visibility area
	visibility.addEventListener("mousemove", mousemove);

	// Initializing function for event listener of "mouseleave" on the eye visibility area
	mouseleave = () => {
		// The mouse cursor leave the eye visibility area

		if (!registered) {
			// The mouse cursor is not registered

			// Stopping the process of registering
			clearTimeout(processes.registering);
		}

		// Writing transition time for smooth eyelid closing and pupil expansion
		eye.style.setProperty("--transition", "1s");

		// Stopping the proccess of losting the mouse cursor
		clearTimeout(processes.losting);

		// Starting the proccess of losting the mouse cursor
		processes.losting = setTimeout(() => {
			// The eye waited from 0ms to 5000ms while continuing to look at the last position of the mouse cursor

			// Writing status that the mouse cursor leave the eye visibility area
			found = false;

			// Deinitializing offset
			eye.style.removeProperty("--offset-x");
			eye.style.removeProperty("--offset-y");

			// Closing of the eyelids and expansion of the pupil
			eye.classList.remove("expanded", "excited");
		}, Math.random() * 5000);
	};

	// Initializing event listener of "mouseleave" on the eye visibility area
	visibility.addEventListener("mouseleave", mouseleave);

	/**
	 * @name Starting process of the eye searching
	 */
	function search() {
		// Stopping the proccess of the eye pupil movement
		clearInterval(processes.moving);

		// Starting the proccess of the eye pupil movement
		processes.moving = setInterval(() => {
			// Moving the eye pupil

			if (!found && !offended && !enemies) {
				// The cursor is not found and not offended and completely offended

				if (left >= 10) {
					// The border has been reached

					// Writing new offset from the left
					left -= Math.round(Math.random());
				} else if (left <= 5) {
					// The border has been reached

					// Writing new offset from the left
					left += Math.round(Math.random());
				} else {
					// The border has not been reached

					// Writing new offset from the left
					left += Math.floor(Math.random() * 3 - 1);
				}

				if (bottom >= 5) {
					// The border has been reached

					// Writing new offset from the bottom
					bottom -= Math.round(Math.random());
				} else if (bottom <= 1) {
					// The border has been reached

					// Writing new offset from the bottom
					bottom += Math.round(Math.random());
				} else {
					// The border has not been reached

					// Writing new offset from the bottom
					bottom += Math.floor(Math.random() * 3 - 1);
				}

				// Writing new coordinates to the <i> element
				eye.style.setProperty("--left", left + "px");
				eye.style.setProperty("--bottom", bottom + "px");
			}
		}, 20);

		// Stopping the proccess of timeout befor starting changing pupil movement speed
		clearTimeout(processes.pretransition);

		// Starting the process of timeout befor starting changing pupil movement speed
		processes.pretransition = setTimeout(() => {
			// The speed of pupil movement will begin to change after 0ms to 1500ms

			// Stopping the proccess of changing pupil movement speed
			clearInterval(processes.transition);

			// Starting the process of changing pupil movement speed
			processes.transition = setInterval(() => {
				// Changing speed of movement the eye pupil

				if (!found && !offended && !enemies) {
					// The cursor is not found and not offended and not completely offended

					if (transition >= 0.7) {
						// The border has been reached

						// Writing new speed of the movement
						transition -= Math.round(Math.random()) / 10;
					} else if (transition <= 0.1) {
						// The border has been reached

						// Writing new speed of the movement
						transition += Math.round(Math.random()) / 10;
					} else {
						// The border has not been reached

						// Writing new speed of the movement
						transition += Math.floor(Math.random() * 3 - 1) / 10;
					}

					// Writing transition time for smooth pupil movement
					eye.style.setProperty(
						"--transition",
						parseFloat(transition.toFixed(1)) + "s",
					);
				}
			}, 40);
		}, Math.random() * 1500);
	}

	/**
	 * @name Starting process of the eye relaxing
	 */
	function relax() {
		// Stopping the proccess of the eye relaxing
		clearTimeout(processes.relaxing);

		// Starting the process of the eye relaxing
		processes.relaxing = setTimeout(() => {
			// Writing transition time for smooth pupil movement
			eye.style.setProperty("--transition", "0.4s");

			// Writing status that the mouse cursor losted by the eye
			found = false;

			// Deinitializing offset
			eye.style.removeProperty("--offset-x");
			eye.style.removeProperty("--offset-y");

			// Writing new coordinates to the <i> element
			eye.style.setProperty("--left", "7px");
			eye.style.setProperty("--bottom", "3px");

			// Closing of the eyelids and expansion of the pupil
			eye.classList.remove("expanded", "excited");
		}, Math.random() * 2000);
	}

	// Initializing function for event listener of "mousemove" on the document
	_mousemove = () => {
		// The mouse cursor moving

		// Starting the proccess of pupil movement
		search();

		// Stopping the proccess loss of detection the mouse cursor by the eye
		clearTimeout(processes.undetection);

		// Starting the process loss of detection the mouse cursor by the eye
		processes.undetection = setTimeout(() => {
			// Stopping the proccess of pupil movement
			clearInterval(processes.moving);

			// Stopping the proccess of timeout befor starting changing pupil movement speed
			clearTimeout(processes.pretransition);

			// Stopping the proccess of changing pupil movement speed
			clearInterval(processes.transition);

			// Starting the process of relaxing
			relax();
		}, Math.random() * 3000);
	};

	// Initializing event listener of "mousemove" on the document
	document.addEventListener("mousemove", _mousemove);
}
