import { Colors } from './../../../models/colors';
import { css } from 'emotion';
import { mediaQueries } from '../../../utils/styles';
import { SERVER_MESSAGE_TYPE } from '../../../utils/global';

export const serverMessageStyle = (palette: Colors, type: SERVER_MESSAGE_TYPE) => {
	let color: string;
	switch (type) {
		case SERVER_MESSAGE_TYPE.SUCCESS:
			color = palette.color9;
			break;
		case SERVER_MESSAGE_TYPE.ERROR:
			color = palette.color8;
			break;
		case SERVER_MESSAGE_TYPE.ALERT:
			color = palette.color17;
			break;
	}
	let serverMessageStyle = css`
		display: flex;
		color: ${palette.color10};
		height: 30px;
		background-color: ${color};
		font-size: 16rem;
		padding: 10px;
		align-items: center;
		${mediaQueries.small(css`
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
		`)};
	`;
	return serverMessageStyle;
};

const iconStyle = (colorPalette: Colors) => {
	return css`
		color: ${colorPalette.color10};
		flex-grow: 1;
	`;
};

export const textStyle = () => {
	return css`
		flex-grow: 60;
	`;
};

export const leftIconStyle = (colorPalette: Colors) => {
	return css`
		${iconStyle(colorPalette)};
	`;
};

export const rightIconStyle = (colorPalette: Colors) => {
	return css`
		${iconStyle(colorPalette)} text-align: center;
		cursor: pointer;
		flex-grow: 0.5;
	`;
};