// ==============
//   TYPES
// ==============

type CssColorOptions = {
	readonly tag: string;
	readonly lightClassName?: string;
	readonly darkClassName?: string;
};

// ==============
//   EXPORTS
// ==============

export const generateCssColorVariables = (
	options: CssColorOptions
): string => {
	const { tag, lightClassName = '', darkClassName = '' } = options;
	const light = lightClassName
		? `${ tag }.${ lightClassName } { ${ lightCssVariables } }`
		: '';
	const dark = darkClassName
		? `${ tag }.${ darkClassName } { ${ darkCssVariables } }`
		: '';

	return `
	    ${ tag } { ${ lightCssVariables } }
	    @media (prefers-color-scheme: dark) {
	        ${ tag } { ${ darkCssVariables } }
	    }
	    ${ light }
	    ${ dark }
	`.replace( /\s/g, '' );
};

export const colors = {
	body: {
		foreground: 'var(--inlexa-body-foreground)',
		background: 'var(--inlexa-body-background)',
	},
	app: {
		foreground: 'var(--inlexa-app-foreground)',
		background: 'var(--inlexa-app-background)',
		link: {
			base: 'var(--inlexa-base-link)',
			hover: 'var(--inlexa-hover-link)',
		},
		border: 'var(--inlexa-app-border-color)',
		outline: 'var(--inlexa-app-outline-color)',
	},
	logo: {
		icon: 'var(--inlexa-logo-icon-color)',
		text: 'var(--inlexa-logo-text-color)',
	},
	buttons: {
		primary: {
			base: {
				foreground: 'var(--inlexa-primary-button-base-foreground)',
				background: 'var(--inlexa-primary-button-base-background)',
				border: 'var(--inlexa-primary-button-base-border)',
				outline: 'var(--inlexa-primary-button-base-outline)',
			},
			hover: {
				foreground: 'var(--inlexa-primary-button-hover-foreground)',
				background: 'var(--inlexa-primary-button-hover-background)',
				border: 'var(--inlexa-primary-button-hover-border)',
			},
			active: {
				foreground: 'var(--inlexa-primary-button-active-foreground)',
				background: 'var(--inlexa-primary-button-active-background)',
				border: 'var(--inlexa-primary-button-active-border)',
			},
			disabled: {
				foreground: 'var(--inlexa-primary-button-disabled-foreground)',
				background: 'var(--inlexa-primary-button-disabled-background)',
				border: 'var(--inlexa-primary-button-disabled-border)',
			},
		},
		secondary: {
			base: {
				foreground: 'var(--inlexa-secondary-button-base-foreground)',
				background: 'var(--inlexa-secondary-button-base-background)',
				border: 'var(--inlexa-secondary-button-base-border)',
				outline: 'var(--inlexa-secondary-button-base-outline)',
			},
			hover: {
				foreground: 'var(--inlexa-secondary-button-hover-foreground)',
				background: 'var(--inlexa-secondary-button-hover-background)',
				border: 'var(--inlexa-secondary-button-hover-border)',
			},
			active: {
				foreground: 'var(--inlexa-secondary-button-active-foreground)',
				background: 'var(--inlexa-secondary-button-active-background)',
				border: 'var(--inlexa-secondary-button-active-border)',
			},
			disabled: {
				foreground:
					'var(--inlexa-secondary-button-disabled-foreground)',
				background:
					'var(--inlexa-secondary-button-disabled-background)',
				border: 'var(--inlexa-secondary-button-disabled-border)',
			},
		},
		transparent: {
			base: {
				foreground: 'var(--inlexa-transparent-button-base-foreground)',
				background: 'var(--inlexa-transparent-button-base-background)',
				border: 'var(--inlexa-transparent-button-base-border)',
				outline: 'var(--inlexa-transparent-button-base-outline)',
			},
			hover: {
				foreground: 'var(--inlexa-transparent-button-hover-foreground)',
				background: 'var(--inlexa-transparent-button-hover-background)',
				border: 'var(--inlexa-transparent-button-hover-border)',
			},
			active: {
				foreground:
					'var(--inlexa-transparent-button-active-foreground)',
				background:
					'var(--inlexa-transparent-button-active-background)',
				border: 'var(--inlexa-transparent-button-active-border)',
			},
			disabled: {
				foreground:
					'var(--inlexa-transparent-button-disabled-foreground)',
				background:
					'var(--inlexa-transparent-button-disabled-background)',
				border: 'var(--inlexa-transparent-button-disabled-border)',
			},
		},
	},
	toggle: {
		disabled: 'var(--inlexa-toggle-disabled)',
		enabled: {
			background: 'var(--inlexa-toggle-enabled-background)',
			foreground: 'var(--inlexa-toggle-enabled-foreground)',
		},
		outline: 'var(--inlexa-toggle-outline)',
	},
	shadows: {
		base: 'var(--inlexa-app-base-shadow)',
		hover: 'var(--inlexa-app-hovershadow)',
	},
	examples: {
		addition: {
			background: 'var(--inlexa-examples-addition-background)',
			foreground: 'var(--inlexa-examples-addition-foreground)',
		},
		removal: {
			background: 'var(--inlexa-examples-removal-background)',
			foreground: 'var(--inlexa-examples-removal-foreground)',
		},
	},
	analysis: {
		fix: {
			foreground: 'var(--inlexa-fix-foreground)',
			background: 'var(--inlexa-fix-background)',
		},
		checking: {
			foreground: 'var(--inlexa-checking-foreground)',
			background: 'var(--inlexa-checking-background)',
		},
		good: {
			foreground: 'var(--inlexa-good-foreground)',
			background: 'var(--inlexa-good-background)',
		},
		suggestion: {
			foreground: 'var(--inlexa-suggestion-foreground)',
			background: 'var(--inlexa-suggestion-background)',
			highlight: 'var(--inlexa-suggestion-highlight)',
			underline: 'var(--inlexa-suggestion-underline)',
		},
		error: {
			foreground: 'var(--inlexa-error-foreground)',
			background: 'var(--inlexa-error-background)',
			highlight: 'var(--inlexa-error-highlight)',
			underline: 'var(--inlexa-error-underline)',
		},
	},
};

export const fonts = {
	default: {
		family:
			'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Helvetica Neue, sans-serif, Arial',
		size: '14px',
	},
};

export const shadows = {
	regular: `0 1px 10px 0 ${ colors.shadows.base }`,
	hover: `1px 2px 20px 0 ${ colors.shadows.hover }`,
};

// ==============
//   HELPERS
// ==============

const PINK = '#f25d9c';

const cbp = colors.buttons.primary;
const cbs = colors.buttons.secondary;
const cbt = colors.buttons.transparent;

export const lightCssVariables = `
	${ n( colors.body.foreground ) }: #333;
	${ n( colors.body.background ) }: #f6fafd;

	${ n( colors.app.foreground ) }: ${ colors.body.foreground };
	${ n( colors.app.background ) }: white;
	${ n( colors.app.border ) }: #d8e2e8;
	${ n( colors.app.outline ) }: ${ PINK };
	${ n( colors.app.link.base ) }: ${ PINK };
	${ n( colors.app.link.hover ) }: ${ cbp.hover.background };

	${ n( colors.logo.icon ) }: ${ PINK };
	${ n( colors.logo.text ) }: #590d82;

	${ n( cbp.base.background ) }: ${ PINK };
	${ n( cbp.base.foreground ) }: white;
	${ n( cbp.base.border ) }: ${ cbp.base.background };
	${ n( cbp.base.outline ) }: #fba0c6;
	${ n( cbp.hover.background ) }: #f47db0;
	${ n( cbp.hover.foreground ) }: ${ cbp.base.foreground };
	${ n( cbp.hover.border ) }: ${ cbp.hover.background };
	${ n( cbp.active.background ) }: #dd347c;
	${ n( cbp.active.foreground ) }: ${ cbp.base.foreground };
	${ n( cbp.active.border ) }: ${ cbp.active.background };
	${ n( cbp.disabled.background ) }: #e6a0bd;
	${ n( cbp.disabled.foreground ) }: #f2c3d7;
	${ n( cbp.disabled.border ) }: ${ cbp.disabled.background };

	${ n( cbs.base.background ) }: #e9e9ed;
	${ n( cbs.base.foreground ) }: ${ colors.app.foreground };
	${ n( cbs.base.border ) }: #8f8f9d;
	${ n( cbs.base.outline ) }: ${ cbp.base.background };
	${ n( cbs.hover.background ) }: #cdcdd0;
	${ n( cbs.hover.foreground ) }: ${ colors.app.foreground };
	${ n( cbs.hover.border ) }: #777782;
	${ n( cbs.active.background ) }: #acacae;
	${ n( cbs.active.foreground ) }: ${ colors.app.foreground };
	${ n( cbs.active.border ) }: #65656f;
	${ n( cbs.disabled.background ) }: #f4f4f6;
	${ n( cbs.disabled.foreground ) }: #999;
	${ n( cbs.disabled.border ) }: #c5c5cc;

	${ n( cbt.base.background ) }: none;
	${ n( cbt.base.foreground ) }: #3349;
	${ n( cbt.base.border ) }: transparent;
	${ n( cbt.base.outline ) }: ${ cbp.base.background };
	${ n( cbt.hover.background ) }: #c0c7cc54;
	${ n( cbt.hover.foreground ) }: ${ cbt.base.foreground };
	${ n( cbt.hover.border ) }: ${ cbt.base.border };
	${ n( cbt.active.background ) }: #c0c7cc88;
	${ n( cbt.active.foreground ) }: ${ cbt.base.foreground };
	${ n( cbt.active.border ) }: ${ cbt.base.border };
	${ n( cbt.disabled.background ) }: ${ cbt.base.background };
	${ n( cbt.disabled.foreground ) }: #3345;
	${ n( cbt.disabled.border ) }: ${ cbt.base.border };
	
	${ n( colors.toggle.disabled ) }: #abb1b4;
	${ n( colors.toggle.enabled.background ) }: ${ cbp.base.background };
	${ n( colors.toggle.enabled.foreground ) }: ${ cbp.base.foreground };
	${ n( colors.toggle.outline ) }: ${ cbp.base.outline };

	${ n( colors.shadows.base ) }: rgba(35,57,70,0.2);
	${ n( colors.shadows.hover ) }: rgba(35,57,70,0.4);

	${ n( colors.analysis.fix.foreground ) }: white;
	${ n( colors.analysis.fix.background ) }: #11a683;

	${ n( colors.analysis.checking.foreground ) }: #5d82bb;
	${ n( colors.analysis.checking.background ) }: ${ colors.app.background };

	${ n( colors.analysis.good.foreground ) }: #11a683;
	${ n( colors.analysis.good.background ) }: ${ colors.app.background };

	${ n( colors.analysis.suggestion.foreground ) }: #ff9e20;
	${ n( colors.analysis.suggestion.background ) }: ${ colors.app.background };
	${ n( colors.analysis.suggestion.highlight ) }: #ff9e2022;
	${ n( colors.analysis.suggestion.underline ) }: #ff9e20;

	${ n( colors.analysis.error.foreground ) }: #f23452;
	${ n( colors.analysis.error.background ) }: ${ colors.app.background };
	${ n( colors.analysis.error.highlight ) }: #f2345222;
	${ n( colors.analysis.error.underline ) }: #f23452;
	
	${ n( colors.examples.addition.foreground ) }: #1d5933;
	${ n( colors.examples.addition.background ) }: #bae1c8;
	${ n( colors.examples.removal.foreground ) }: #b7001d;
	${ n( colors.examples.removal.background ) }: #ffdfe4;
`;

const darkCssVariables = `
	${ n( colors.body.foreground ) }: white;
	${ n( colors.body.background ) }: #081017;

	${ n( colors.app.foreground ) }: ${ colors.body.foreground };
	${ n( colors.app.background ) }: #15202b;
	${ n( colors.app.border ) }: #38444d;

	${ n( colors.logo.text ) }: white;

	${ n( cbp.disabled.background ) }: #7b4a5f;
	${ n( cbp.disabled.foreground ) }: #917983;

	${ n( cbs.base.background ) }: #8d9cac44;
	${ n( cbs.base.border ) }: #24282d44;
	${ n( cbs.hover.background ) }: #8d9cac66;
	${ n( cbs.hover.border ) }: #24282d66;
	${ n( cbs.active.background ) }: #8d9cac22;
	${ n( cbs.active.border ) }: #24282d22;
	${ n( cbs.disabled.background ) }: #8d9cac11;
	${ n( cbs.disabled.foreground ) }: #647a8c;
	${ n( cbs.disabled.border ) }: #24282d11;

	${ n( cbt.base.foreground ) }: #dde9;
	${ n( cbt.hover.background ) }: #4f4f535c;
	${ n( cbt.active.background ) }: #4f4f5322;
	${ n( cbt.disabled.foreground ) }: #dde5;

	${ n( colors.toggle.disabled ) }: #7d8488;

	${ n( colors.shadows.base ) }: #020212;
	${ n( colors.shadows.hover ) }: #020212;

	${ n( colors.analysis.fix.background ) }: #006f55;

	${ n( colors.analysis.checking.foreground ) }: #1da1f2;
	${ n( colors.analysis.checking.background ) }: ${ colors.body.background };
	${ n( colors.analysis.good.background ) }: ${ colors.body.background };
	${ n( colors.analysis.suggestion.background ) }: ${ colors.body.background };
	${ n( colors.analysis.error.background ) }: ${ colors.body.background };
	
	${ n( colors.examples.addition.foreground ) }: #fff;
	${ n( colors.examples.addition.background ) }: #275136;
	${ n( colors.examples.removal.foreground ) }: #fff;
	${ n( colors.examples.removal.background ) }: #60000f;
`;

function n( string: string ): string {
	return string.replace( 'var(', '' ).replace( ')', '' );
}