import { __ } from '@wordpress/i18n';

export const DARK_PALETTES = [
	{
		slug: 'style-1',
		title: __( 'Style 1', 'astra-sites' ),
		colors: [
			'#0085FF',
			'#0177E3',
			'#FFFFFF',
			'#E7F6FF',
			'#212A37',
			'#0F172A',
			'#4F5B62',
			'#070614',
			'#222222',
		],
	},
	{
		slug: 'style-2',
		title: __( 'Style 2', 'astra-sites' ),
		colors: [
			'#8B5DFF',
			'#7B47FF',
			'#FFFFFF',
			'#F2F0FE',
			'#1B203A',
			'#0F102A',
			'#4B4D56',
			'#0D0614',
			'#222222',
		],
	},
	{
		slug: 'style-3',
		title: __( 'Style 3', 'astra-sites' ),
		colors: [
			'#21B4A6',
			'#0FAF9F',
			'#FFFFFF',
			'#EDF6F3',
			'#1C2A3C',
			'#111A28',
			'#4E4E4E',
			'#061314',
			'#222222',
		],
	},
	{
		slug: 'style-4',
		title: __( 'Style 4', 'astra-sites' ),
		colors: [
			'#FF6210',
			'#FF5700',
			'#FFFFFF',
			'#FEF1E4',
			'#21201F',
			'#171615',
			'#373532',
			'#140B06',
			'#222222',
		],
	},
	{
		slug: 'style-5',
		title: __( 'Style 5', 'astra-sites' ),
		colors: [
			'#239D60',
			'#039A4F',
			'#FFFFFF',
			'#EDF6F1',
			'#202B29',
			'#131D19',
			'#353A36',
			'#0C1406',
			'#222222',
		],
	},
	{
		slug: 'style-6',
		title: __( 'Style 6', 'astra-sites' ),
		colors: [
			'#FB5FAB',
			'#EA559D',
			'#FFFFFF',
			'#FCEEF5',
			'#29223C',
			'#180F2A',
			'#4B3F4A',
			'#140610',
			'#222222',
		],
	},
	{
		slug: 'style-7',
		title: __( 'Style 7', 'astra-sites' ),
		colors: [
			'#DD183B',
			'#CC1939',
			'#FFFFFF',
			'#FFEDE6',
			'#231417',
			'#150B0F',
			'#3D2E32',
			'#140609',
			'#222222',
		],
	},
	{
		slug: 'style-8',
		title: __( 'Style 8', 'astra-sites' ),
		colors: [
			'#FD9800',
			'#E98C00',
			'#FFFFFF',
			'#FEF9E1',
			'#161923',
			'#090C17',
			'#2E2D2A',
			'#141006',
			'#222222',
		],
	},
	{
		slug: 'style-9',
		title: __( 'Style 9', 'astra-sites' ),
		colors: [
			'#DCA54A',
			'#D09A40',
			'#FFFFFF',
			'#FAF5E5',
			'#1B1B1B',
			'#0E0D06',
			'#2E2D2A',
			'#141006',
			'#222222',
		],
	},
	{
		slug: 'style-10',
		title: __( 'Style 10', 'astra-sites' ),
		colors: [
			'#3AA6B9',
			'#2997AA',
			'#FFFFFF',
			'#E9F8F9',
			'#1C2125',
			'#091118',
			'#2E2D2A',
			'#061114',
			'#222222',
		],
	},
];

export const LIGHT_PALETTES = [
	{
		slug: 'style-1',
		title: __( 'Style 1', 'astra-sites' ),
		colors: [
			'#0067FF',
			'#005EE9',
			'#0F172A',
			'#364151',
			'#E7F6FF',
			'#FFFFFF',
			'#D1DAE5',
			'#070614',
			'#222222',
		],
	},
	{
		slug: 'style-2',
		title: __( 'Style 2', 'astra-sites' ),
		colors: [
			'#54B435',
			'#379237',
			'#0F172A',
			'#2F3B40',
			'#EDFBE2',
			'#FFFFFF',
			'#D5EAD8',
			'#0C1406',
			'#222222',
		],
	},
	{
		slug: 'style-3',
		title: __( 'Style 3', 'astra-sites' ),
		colors: [
			'#DD183B',
			'#CC1939',
			'#0F172A',
			'#3A3A3A',
			'#FFEDE6',
			'#FFFFFF',
			'#FFD1BF',
			'#140609',
			'#222222',
		],
	},
	{
		slug: 'style-4',
		title: __( 'Style 4', 'astra-sites' ),
		colors: [
			'#FB5FAB',
			'#EA559D',
			'#0F172A',
			'#454F5E',
			'#FCEEF5',
			'#FFFFFF',
			'#FAD8E9',
			'#140610',
			'#222222',
		],
	},
	{
		slug: 'style-5',
		title: __( 'Style 5', 'astra-sites' ),
		colors: [
			'#FF6210',
			'#F15808',
			'#1C0D0A',
			'#353535',
			'#FEF1E4',
			'#FFFFFF',
			'#E5D7D1',
			'#140B06',
			'#222222',
		],
	},
	{
		slug: 'style-6',
		title: __( 'Style 6', 'astra-sites' ),
		colors: [
			'#6528F7',
			'#5511F8',
			'#0F172A',
			'#454F5E',
			'#F2F0FE',
			'#FFFFFF',
			'#D8D8F5',
			'#0D0614',
			'#222222',
		],
	},
	{
		slug: 'style-7',
		title: __( 'Style 7', 'astra-sites' ),
		colors: [
			'#FD9800',
			'#E98C00',
			'#0F172A',
			'#454F5E',
			'#FEF9E1',
			'#FFFFFF',
			'#F9F0C8',
			'#141006',
			'#222222',
		],
	},
	{
		slug: 'style-8',
		title: __( 'Style 8', 'astra-sites' ),
		colors: [
			'#1B9C85',
			'#178E79',
			'#0F172A',
			'#454F5E',
			'#EDF6EE',
			'#FFFFFF',
			'#D4F3D7',
			'#06140C',
			'#222222',
		],
	},
	{
		slug: 'style-9',
		title: __( 'Style 9', 'astra-sites' ),
		colors: [
			'#DCA54A',
			'#D09A40',
			'#0F172A',
			'#4A4A4A',
			'#FAF5E5',
			'#FFFFFF',
			'#F0E6C5',
			'#141004',
			'#222222',
		],
	},
	{
		slug: 'style-10',
		title: __( 'Style 10', 'astra-sites' ),
		colors: [
			'#3AA6B9',
			'#2997AA',
			'#0F172A',
			'#454F5E',
			'#E9F8F9',
			'#FFFFFF',
			'#CAE6E8',
			'#181823',
			'#222222',
		],
	},
];

/**
 * Reorganizes the color palette based on the Astra's palette colors reorganization compatibility introduced in v4.8.9.
 *
 * @param {Array}  PALETTE          - The original color palette.
 * @param {Object} templateResponse - The template response containing customization data.
 *
 * @return {Array} - The reorganized color palette.
 */
const getColorPalette = ( PALETTE, templateResponse = {} ) => {
	// Check if the reorganization compatibility is enabled in the template response for Astra.
	const astraColorPaletteReorganized =
		templateResponse?.[ 'astra-site-customizer-data' ]?.[
			'astra-settings'
		]?.[ 'enable-4-8-9-compatibility' ] ?? true;

	// If the reorganization is not enabled, return the original palette.
	if ( ! astraColorPaletteReorganized ) {
		return PALETTE;
	}

	// If the reorganization is enabled, we need to reorganize the colors in the palette.
	return PALETTE.map( ( palette ) => {
		const reorganizedPaletteColors = [ ...palette.colors ];

		// Swap 5th and 6th (index 4 and 5).
		[ reorganizedPaletteColors[ 4 ], reorganizedPaletteColors[ 5 ] ] = [
			reorganizedPaletteColors[ 5 ],
			reorganizedPaletteColors[ 4 ],
		];

		// Swap 7th and 8th (index 6 and 7).
		[ reorganizedPaletteColors[ 6 ], reorganizedPaletteColors[ 7 ] ] = [
			reorganizedPaletteColors[ 7 ],
			reorganizedPaletteColors[ 6 ],
		];

		return {
			...palette,
			colors: reorganizedPaletteColors,
		};
	} );
};

/**
 * Gets the default color palette based on the template response.
 *
 * @param {Object} templateResponse - The template response containing customization data.
 *
 * @return {Array} - The light color palette.
 */
export const getLightColorPalette = ( templateResponse = {} ) => {
	return getColorPalette( LIGHT_PALETTES, templateResponse );
};

/**
 * Gets the dark color palette based on the template response.
 *
 * @param {Object} templateResponse - The template response containing customization data.
 *
 * @return {Array} - The dark color palette.
 */
export const getDarkColorPalette = ( templateResponse = {} ) => {
	return getColorPalette( DARK_PALETTES, templateResponse );
};
