import { css, keyframes } from 'emotion';
import { transparentize } from 'polished';
import { Colors } from '../../../models/colors';

export const loaderWrapper = (palette: Colors) => {
	return css`
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 9999;
		background-color: ${transparentize(0.6, palette.color1)};
		display: flex;
		align-items: center;
		justify-content: space-around;
	`;
};

export const dotsWrapper = () => {
	return css`
		width: 290px;
		text-align: center;
		display: flex;
		justify-content: space-around;
	`;
};

export const dotsInner = (index: number, palette: Colors) => {
	const dotAnimation = keyframes`
		0%, 80%, 100% { 
			-webkit-transform: scale(0);
			transform: scale(0);
		} 40% { 
			-webkit-transform: scale(1.0);
			transform: scale(1.0);
		}		
	`;

	let dotsInnerStyle = css`
		width: 40px;
		height: 40px;
		background: ${palette.color3};

		border-radius: 100%;
		display: inline-block;
		-webkit-animation: ${dotAnimation} 2s infinite ease-in-out both;
		animation: ${dotAnimation} 2s infinite ease-in-out both;
	`;
	switch (index) {
		case 0:
			return css`
				${dotsInnerStyle};
				-webkit-animation-delay: -0.8s;
				animation-delay: -0.8s;
			`;
		case 1:
			return css`
				${dotsInnerStyle};
				-webkit-animation-delay: -0.3s;
				animation-delay: -0.3s;
			`;
		default:
			return dotsInnerStyle;
	}
};