// https://css-tricks.com/snippets/javascript/lighten-darken-color/
const LightenDarkenColor = (col, percent) => {
	const amt = Math.round((255 * percent) / 100);
	let hex = col;
	if (hex[0] === '#') {
		hex = hex.slice(1);
	}
	const digit = hex.length < 6 ? 1 : 2;

	let r = parseInt(hex.slice(0, digit), 16) + amt;
	if (r > 255) r = 255;
	else if (r < 0) r = 0;

	let g = parseInt(hex.slice(digit, digit * 2), 16) + amt;
	if (g > 255) g = 255;
	else if (g < 0) g = 0;

	let b = parseInt(hex.slice(digit * 2), 16) + amt;
	if (b > 255) b = 255;
	else if (b < 0) b = 0;

	return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
};

const splitRGB = (color) => {
	let hex = color;
	if (hex[0] === '#') {
		hex = hex.slice(1);
	}
	const digit = hex.length < 6 ? 1 : 2;
	return [
		parseInt(hex.slice(0, digit), 16),
		parseInt(hex.slice(digit, digit * 2), 16),
		parseInt(hex.slice(digit * 2), 16),
	];
};

export const transparentize = (color, percent) => {
	const rgb = splitRGB(color).join(', ');
	return `rgba(${rgb}, ${(100 - percent) / 100})`;
};

const lighten = (color, percent) => LightenDarkenColor(color, percent);
const darken = (color, percent) => LightenDarkenColor(color, percent * -1);

const nixplayBlue = '#62B1E6';
const nixplayOrange = '#FFAC25';
const menuBlue = '#62B1E6';
const menuBlueHighlight = '#73B4FE';

const red = '#ED4740';
const green = '#00C095';
const greenLabel = '#4CD964';

const white = '#FFF';
const black = '#000';
const grayDarker = lighten(black, 15); // '#262626';
const grayDark = lighten(black, 25); // '#404040';
const gray = lighten(black, 45); // '#737373';
const grayLight = lighten(black, 65); // '#a6a6a6';
const grayLighter = lighten(black, 75); // '#bfbfbf';
const grayLightest = lighten(black, 90); // '#e6e6e6';
const grayExtremeLight = lighten(black, 95);

export const basicColor = {
	// transparent
	transparent: '#00000000',

	// Accent Colors
	blue: '#479ADE',
	blueGradientStart: '#80C3F3',
	blueGradientEnd: '#4A90E2',

	// Basic Colors
	white: '#FFFFFF',
	black: '#000000',
	red: '#EB5649',
	green: '#4CD964',
	orange: '#F09300',
	orangeLight: '#f4e1c0',
	yellow: '#F0AD4E',
	yellowLight: '#e4c79d',

	// Neutral Colors
	grey01: '#F7F7F7',
	grey02: '#C3C9CB',
	grey03: '#8E9193',
	grey04: '#6C6C6C',
	grey05: '#4A4A4A',
	grey06: '#4A4A4A',

	// Ambient Colors
	mistBlue01: '#F7F9FA',
	mistBlue02: '#EEF6F7',
	mistBlue03: '#DFE7EB',
	mistBlue04: '#7998A5',
	mistBlue05: '#466A78',

	// wrike
	wrikeBg: '#1d364c',
	wrikeGray: '#f7f7f7',
	wrikeGreen1: '#f2f8ea',
	wrikeGreen2: '#33bb11',
	wrikeGreen3: '#689f38',

	// gitlab
	gitlabGray1: '#fafafa',
	gitlabGray2: '#e5e5e5',
	gitlabGray3: '#eaeaea',
	gitlabGray4: '#6f6f6f',
	gitlabGray5: '#2e2e2e',

	githubBlue: '#dbedff',
	githubHeader: '#fafbfc',
	githubGutter: '#d9dadc',

};

export const color = {
	...basicColor,

	textMistBlue: basicColor.mistBlue04,
	textGrey: basicColor.grey04,
	textBlack: basicColor.black,
	textBlue: basicColor.blue,
	textWhite: basicColor.white,

	borderMistBlue: basicColor.mistBlue03,
	borderGrey: transparentize(basicColor.black, 90),
	blue: nixplayBlue,
	blueLight: lighten(nixplayBlue, 15),
	orange: nixplayOrange,
	menuBlueHighlight,
	red,
	green,
	greenLabel,
	white,
	black,
	grayDarker,
	grayDark,
	gray,
	grayLight,
	grayLighter,
	grayLightest,
	grayExtremeLight,
	lighten,
	darken,
	menuBlue,
};


export const fontSizes = {
	order: ['xxsmall', 'xsmall', 'small', 'base', 'medium', 'large', 'xlarge', 'xxlarge'],
	xxlarge: 32,
	xlarge: 26,
	large: 22,
	medium: 18,
	base: 16,
	small: 14,
	xsmall: 12,
	xxsmall: 10,
	smaller(size, degree) {
		const index = this.order.indexOf(size);
		return (index - degree < 0) ? this.order[0] : this.order[index - degree];
	},
	larger(size, degree) {
		const index = this.order.indexOf(size);
		return (index + degree > this.order.length - 1) ?
			this.order[this.order.length - 1] :
			this.order[index + degree];
	},
};
