import React, { type FC, type HTMLAttributes } from 'react';
import styled from '@emotion/styled';

const GooeyLoaderContainer = styled.div`
	width: 200px;
	height: 200px;
	position: relative;
	transform: translate(-50%, -50%);
	margin: auto;
	filter: url('#gooey-loader-filter');
	animation: rotate-move 2s ease-in-out infinite;

	.dot {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background-color: #000;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.dot-3 {
		background-color: #f74d75;
		animation:
			dot-3-move 2s ease infinite,
			index 6s ease infinite;
	}

	.dot-2 {
		background-color: #10beae;
		animation:
			dot-2-move 2s ease infinite,
			index 6s -4s ease infinite;
	}

	.dot-1 {
		background-color: #ffe386;
		animation:
			dot-1-move 2s ease infinite,
			index 6s -2s ease infinite;
	}

	@keyframes dot-3-move {
		20% {
			transform: scale(1);
		}
		45% {
			transform: translateY(-18px) scale(0.45);
		}
		60% {
			transform: translateY(-90px) scale(0.45);
		}
		80% {
			transform: translateY(-90px) scale(0.45);
		}
		100% {
			transform: translateY(0px) scale(1);
		}
	}

	@keyframes dot-2-move {
		20% {
			transform: scale(1);
		}
		45% {
			transform: translate(-16px, 12px) scale(0.45);
		}
		60% {
			transform: translate(-80px, 60px) scale(0.45);
		}
		80% {
			transform: translate(-80px, 60px) scale(0.45);
		}
		100% {
			transform: translateY(0px) scale(1);
		}
	}

	@keyframes dot-1-move {
		20% {
			transform: scale(1);
		}
		45% {
			transform: translate(16px, 12px) scale(0.45);
		}
		60% {
			transform: translate(80px, 60px) scale(0.45);
		}
		80% {
			transform: translate(80px, 60px) scale(0.45);
		}
		100% {
			transform: translateY(0px) scale(1);
		}
	}

	@keyframes rotate-move {
		55% {
			transform: translate(-50%, -50%) rotate(0deg);
		}
		80% {
			transform: translate(-50%, -50%) rotate(360deg);
		}
		100% {
			transform: translate(-50%, -50%) rotate(360deg);
		}
	}

	@keyframes index {
		0%,
		100% {
			z-index: 3;
		}
		33.3% {
			z-index: 2;
		}
		66.6% {
			z-index: 1;
		}
	}
`;

function loadSvgFilter() {
	if (typeof window === 'undefined') {
		return;
	}
	if (document.querySelector('#GooeyLoaderSvgFilter')) {
		return;
	}
	const el = document.createElement('div');
	el.id = 'GooeyLoaderSvgFilter';
	el.innerHTML = `
<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
  <defs>
    <filter id='gooey-loader-filter'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='10' result='blur' />
      <feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7'/>
    </filter>
  </defs>
</svg>
`;
	document.body.appendChild(el);
}

/**
 * GooeyLoader
 *
 * @see https://codepen.io/Izumenko/pen/MpWyXK
 */
export const GooeyLoader: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
	loadSvgFilter();
	return (
		<GooeyLoaderContainer {...props}>
			<div className='dot dot-1' />
			<div className='dot dot-2' />
			<div className='dot dot-3' />
		</GooeyLoaderContainer>
	);
};