import { css, keyframes } from 'emotion';

const breakpoints: { [key: string]: string } = {
	small: '(max-width:991px) and (min-width:320px)',
	large: '(min-width: 992px)'
};

export const mediaQueries = Object.keys(breakpoints).reduce(
	(accumulator: { [key: string]: (css: string) => string }, label: number | string) => {
		accumulator[label] = cls =>
			css`
				@media ${breakpoints[label]} {
					${cls};
				}
			`;
		return accumulator;
	},
	{ small: null, large: null }
);

export const mediaQueryEvent = (_breakpoints: { [key: string]: string } = breakpoints) => {
	let eventNames = Object.keys(_breakpoints).reduce(
		(animations, breakpoint) => {
			animations[breakpoint] = keyframes` {
			from { clip: rect(1px, auto, auto, auto); }
			to { clip: rect(0px, auto, auto, auto); }
			label: ${breakpoint};
		}`;
			return animations;
		},
		{} as { [key: string]: string }
	);
	return `	
	animation-duration: 0.001s;
	animation-name: ${eventNames[Object.keys(_breakpoints)[0]]};
	${Object.keys(_breakpoints)
		.map(key => {
			return `
		@media ${_breakpoints[key]} { 
			animation-name: ${eventNames[key]}; 
		}`;
		})
		.join('')}`;
};