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

export const dropdownWrapper = (colorPalette: Colors) => {
	return css`
		${mediaQueries.small(css`
			position: fixed;
			top: 0;
			left: 0;
			background: ${colorPalette.color1};
			padding: 18px 15px 22px;
			height: 100%;
			width: 100%;
			box-sizing: border-box;
			z-index: 1000;
		`)};
	`;
};

export const listStyle = (colorPalette: Colors, isDropdown: boolean) => {
	let listStyle = css`
		background-color: ${colorPalette.color10};
		padding-left: 0;
		position: absolute;
		width: 99.6%;
		border: 1px solid ${colorPalette.color6};
		z-index: 3;
		max-height: 223px;
		overflow-y: auto;

		${mediaQueries.small(css`
			max-height: 88%;
			border-radius: 4px;
			position: static;
			width: unset;
		`)};
	`;

	if (isDropdown) {
		listStyle = css`
			${listStyle};
			${mediaQueries.small(css`
				text-align: center;
			`)};
		`;
	}

	return listStyle;
};

export const itemStyle = (colorPalette: Colors, withCategory?: boolean, isDropdown?: boolean) => {
	let itemStyle = css`
		padding-bottom: 3px;
		padding-left: 6px;
		padding-right: 14px;
		padding-top: 3px;
		font-size: 16rem;
		list-style: none;
		color: ${colorPalette.color13};
		&:hover {
			background-color: ${colorPalette.color4};
			cursor: pointer;
		}
		&:focus {
			background-color: ${colorPalette.color4};
			cursor: pointer;
		}
		::selection {
			background: ${colorPalette.color3};
		}
		::-moz-selection {
			background: ${colorPalette.color3};
		}
	`;

	if (withCategory) {
		itemStyle = css`
			${itemStyle};
			padding-left: 15px;

			${mediaQueries.small(css`
				font-size: 18rem;
				padding-top: 20px;
				padding-bottom: 20px;
				border-bottom: 1px solid ${colorPalette.color13};
				padding-left: 26px;
			`)};
		`;
	}

	if (isDropdown) {
		itemStyle = css`
			${itemStyle};
			${mediaQueries.small(css`
				padding-left: 0;
				padding-right: 0;
			`)};
		`;
	}

	return itemStyle;
};