import { css, keyframes } from "emotion";

export interface StyleParams {
	css: typeof css;
	keyframes: typeof keyframes;
}

type StylesheetFn = (params: StyleParams) => any;

function createGetterFn<K>(
	compiledStylesheet: any,
): (name: K, modifiers?: { [key: string]: boolean }) => string {
	return (name: K, modifiers: { [key: string]: boolean } = {}): string => {
		let className = compiledStylesheet[name] || "";

		const mods = Object.keys(modifiers);
		for (let i = 0; i < mods.length; i += 1) {
			const modifier = mods[i];

			if (modifiers[modifier]) {
				className += ` ${compiledStylesheet[name]}--${modifier}`;
			}
		}

		return className;
	};
}

export const compileStylesheet = <T extends StylesheetFn, K = keyof ReturnType<T>>(
	stylesheet: T,
) => {
	return createGetterFn<K>(stylesheet({ css, keyframes }));
};

export const compileStylesheetLabelled = <T extends StylesheetFn, K = keyof ReturnType<T>>(
	stylesheet: T,
) => {
	const obj = stylesheet({ css: (...args: any[]) => args as any, keyframes });
	const newObj = Object.keys(obj).reduce<any>((newObj, key) => {
		newObj[key] = `${key} ${css(...obj[key])}`;
		return newObj;
	}, {});
	return createGetterFn<K>(newObj);
};