import { isNull } from 'util';
import { ValidationState } from '../../models/Validation';
import { css } from 'emotion';
import { mediaQueries } from '../../utils/styles';
import { Colors } from '../../models/colors';

export const leftDot = (colorPalette: Colors, valid: ValidationState, customStyle: any = null) => {
	let leftDot = css`
		position: relative;
		&:before {
			font-size: 0;
			content: '';
			position: absolute;
			border: 2px solid ${colorPalette.color5};
			height: 13px;
			width: 13px;
			border-radius: 10px;
			top: 69%;
			transform: translateY(-50%);
			box-sizing: border-box;
			${mediaQueries.large(css`
				left: -25px;
			`)};
			${mediaQueries.small(css`
				left: 10px;
				z-index: 1;
			`)};
		}
	`;

	switch (valid) {
		case ValidationState.Valid:
			leftDot = css`
				${leftDot};
				&:before {
					border: 2px solid ${colorPalette.color9};
					background: ${colorPalette.color9};
				}
			`;
			break;
		case ValidationState.Invalid:
			leftDot = css`
				${leftDot};
				&:before {
					border: 2px solid ${colorPalette.color8};
					background: ${colorPalette.color8};
				}
			`;
			break;
	}
	return isNull(customStyle) ? leftDot : customStyle;
};