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

export const inputStyle = (
	colorPalette: Colors,
	validationState: ValidationState,
	hideLeftDot: boolean = false,
	showChevron: boolean = false
) => {
	let inputStyle = css`
		cursor: text;
		display: inline-block;
		height: 45px;
		color: ${colorPalette.color13};
		width: 100%;
		background-color: ${colorPalette.color1};
		border: 1px solid ${colorPalette.color5};
		border-radius: 2px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		transition: 0.2s;
		-webkit-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.05);
		-moz-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.05);
		box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.05);
		outline: none;
		box-sizing: border-box;
		padding: 6px 12px;
		font-size: 16rem;
		position: relative;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		&:focus,
		&:active {
			transition: 0.1s;
			border: 2px solid ${colorPalette.color2};
		}
		&:read-only {
			cursor: not-allowed;
		}
		::selection {
			background: ${colorPalette.color5};
		}
		::-moz-selection {
			background: ${colorPalette.color5};
		}
	`;

	if (!hideLeftDot) {
		inputStyle = css`
			${inputStyle};
			${mediaQueries.small(css`
				padding-left: 33px;
			`)};
		`;
	}

	if (showChevron) {
		inputStyle = css`
			${inputStyle};
			padding-right: 35px;
			cursor: pointer;
			&:read-only {
				cursor: pointer;
			}
		`;
	}

	switch (validationState) {
		case ValidationState.Valid:
			inputStyle = css`
				${inputStyle};
				border: 2px solid ${colorPalette.color9};
			`;
			break;

		case ValidationState.Invalid:
			inputStyle = css`
				${inputStyle};
				border: 2px solid ${colorPalette.color8};
			`;
			break;

		case ValidationState.None:
			break;
	}
	return inputStyle;
};

export const chevronStyle = (colorPalette: Colors) => {
	return css`
		position: absolute;
		color: ${colorPalette.color13};
		height: 20px;
		width: 20px !important;
		right: 10px;
		top: 12px;
		pointer-events: none;
	`;
};

export const wrapperStyle = css`
	position: relative;
`;