import _ from 'lodash'
import { Injectable } from '../decorators'
import { BackgroundColor, BorderBottomColor, Color, PrimaryButtonColors, SelectedMenuItemColors } from '../style-typings/styles'
import { ThemeTextColor } from './theme.typings'

@Injectable('themeService')
export default class ThemeService {

	getActiveTabColor(themeTextColor: ThemeTextColor = 'light', themeColor: string = '#535353'): string {
		const defaultGrey: string = '#535353'
		return (themeTextColor === 'dark')
			? defaultGrey
			: themeColor
	}

	getBackgroundColor(themeColor: string = '#535353'): BackgroundColor {
		return { 'background-color': themeColor }
	}

	getBorderBottomColor(themeTextColor: ThemeTextColor = 'light', themeColor: string = '#535353'): BorderBottomColor {
		const defaultGreyDark: string = '#333333'
		// if dark text is needed, assume site color is too light for the border
		return (themeTextColor === 'dark')
			? { 'border-bottom-color': defaultGreyDark }
			: { 'border-bottom-color': themeColor}
	}

	getIconColorStyle(themeTextColor: ThemeTextColor = 'light', themeColor: string = '#535353'): Color {
		const defaultGrey: string = '#535353'
		// if dark text is needed, assume site color is too light for an icon
		return (themeTextColor === 'dark')
			? { color: defaultGrey}
			: { color: themeColor }
	}

	getLabelColorStyle(themeTextColor: ThemeTextColor = 'light', themeColor: string = '#535353'): Color {
		const defaultLightGrey: string = '#767676'
		// if dark text is needed, assume site color is too light for a label
		return (themeTextColor === 'dark')
			? { color: defaultLightGrey }
			: { color: themeColor }
	}

	getPrimaryButtonColors(themeTextColor: ThemeTextColor = 'light', themeColor: string = '#535353'): PrimaryButtonColors {
		const defaultColors: PrimaryButtonColors = {
			'background-color': '#767676',
			'border-color': '#767676'
		}

		return (themeTextColor === 'dark')
			? defaultColors
			: {
				'background-color': themeColor,
				'border-color': themeColor
			}
	}

	getSelectedMenuItemColors(themeTextColor: ThemeTextColor = 'light', themeColor: string = '#535353'): SelectedMenuItemColors {
		const defaultMenuItemColors: SelectedMenuItemColors = {
			'background-color': '#bbbbbb',
			'color': '#535353'
		}

		return (themeTextColor === 'dark')
			? defaultMenuItemColors
			: {
				'background-color': themeColor,
				'color': 'white'
			}
	}
}