/**
 * @function hexToRgb
 * @description Converts a hex color code to RGB.
 *
 * @param {string} h - The input hex color (e.g., '#FF5733').
 *
 * @return {object} - An object containing the RGB values (e.g., { r: 255, g: 87, b: 51 }).
 */
export const hexToRgb = ( h ) => {
	h = h.replace( '#', '' );
	const r = parseInt( h.substring( 0, 2 ), 16 );
	const g = parseInt( h.substring( 2, 4 ), 16 );
	const b = parseInt( h.substring( 4, 6 ), 16 );
	return { r, g, b };
};

/**
 * @function rgbToHsl
 * @description Converts an RGB color to HSL.
 *
 * @param {object} rgb - An object containing the RGB values (e.g., { r: 255, g: 87, b: 51 }).
 *
 * @return {object} - An object containing the HSL values (e.g., { h: 10, s: 100, l: 50 }).
 */
export const rgbToHsl = ( { r, g, b } ) => {
	r /= 255;
	g /= 255;
	b /= 255;
	const max = Math.max( r, g, b );
	const min = Math.min( r, g, b );
	let h, s, l = ( max + min ) / 2; // eslint-disable-line

	if ( max === min ) {
		h = s = 0; // Achromatic
	} else {
		const d = max - min;
		s = l > 0.5 ? d / ( 2 - max - min ) : d / ( max + min );
		switch ( max ) {
			case r:
				// eslint-disable-next-line no-mixed-operators
				h = ( g - b ) / d + ( g < b ? 6 : 0 );
				break;
			case g:
				// eslint-disable-next-line no-mixed-operators
				h = ( b - r ) / d + 2;
				break;
			case b:
				// eslint-disable-next-line no-mixed-operators
				h = ( r - g ) / d + 4;
				break;
		}
		h /= 6;
	}
	return { h: h * 360, s: s * 100, l: l * 100 };
};

/**
 * @function hslToCss
 * @description Converts an HSL color to a CSS hsla string.
 *
 * @param {number} h     - The hue value (0-360).
 * @param {number} s     - The saturation value (0-100).
 * @param {number} l     - The lightness value (0-100).
 * @param {number} [a=1] - The alpha value (0-1).
 *
 * @return {string} - CSS hsla string.
 */
export const hslToCss = ( h, s, l, a = 1 ) => {
	return `hsla(${ Math.round( h ) }, ${ Math.round( s ) }%, ${ Math.round( l ) }%, ${ a })`;
};

/**
 * @function generateComplementaryGradient
 * @description Generates a radial gradient with complementary colors based on a hex code.
 *
 * @param {string} hex            - The input hex color (e.g., '#FF5733').
 * @param {object} layoutOverride - Optional parameters for gradient customization.
 *
 * @return {string} - CSS background-image string with radial gradients.
 */
export const generateComplementaryGradient = ( hex, layoutOverride ) => {
	const rgb = hexToRgb( hex );
	const hsl = rgbToHsl( rgb );

	// Calculate complementary colors
	const baseHue = hsl.h;
	const complementaryHue1 = ( baseHue + 180 ) % 360; // Primary complement
	const complementaryHue2 = ( baseHue + 150 ) % 360; // Slightly offset for variety
	const complementaryHue3 = ( baseHue + 210 ) % 360; // Another offset

	// Define gradient stops with base color dominating
	const gradients = [
		{
			position: layoutOverride?.position || '40% -30%', // Center the base color
			color: hslToCss( baseHue, hsl.s, hsl.l, 0.9 ),
			size: layoutOverride?.size || '25%',
			transparent: layoutOverride?.transparent || '80%', // Gradual fade to maintain smoothness
		},
		{
			position: '70% 20%',
			color: hslToCss( complementaryHue1, hsl.s * 0.9, hsl.l * 1.1, 0.7 ),
			size: '15%', // Smaller size for accent
			transparent: '60%',
		},
		{
			position: '30% 80%',
			color: hslToCss( complementaryHue2, hsl.s * 0.85, hsl.l * 0.9, 0.6 ),
			size: '12%', // Smaller size for accent
			transparent: '55%',
		},
		{
			position: '80% 70%',
			color: hslToCss( complementaryHue3, hsl.s * 0.95, hsl.l * 1.2, 0.5 ),
			size: '10%', // Smallest accent
			transparent: '50%',
		},
	];

	// Generate radial gradient CSS
	const gradientCss = gradients
		.map(
			( g ) =>
				`radial-gradient(circle at ${ g.position }, ${ g.color } ${ g.size }, transparent ${ g.transparent })`
		)
		.join( ', ' );

	return gradientCss;
};
