import {
	__experimentalUseMultipleOriginColorsAndGradients as experimentalUseMultipleOriginColorsAndGradients,
	useMultipleOriginColorsAndGradients as stableUseMultipleOriginColorsAndGradients,
} from '@wordpress/block-editor';
import { ColorPalette as WPColorPalette } from '@wordpress/components';
import { useSelect } from '@wordpress/data';

import ApplyFilters from '../apply-filters';

const useMultipleOriginColorsAndGradients =
	stableUseMultipleOriginColorsAndGradients ||
	experimentalUseMultipleOriginColorsAndGradients ||
	(() => ({ colors: [], gradients: [], hasColorsOrGradients: false }));

function useColors() {
	// New way to get colors and gradients.
	if (
		useMultipleOriginColorsAndGradients &&
		useMultipleOriginColorsAndGradients()
	) {
		return useMultipleOriginColorsAndGradients().colors;
	}

	// Old way.
	const { themeColors } = useSelect((select) => {
		const settings = select('core/block-editor').getSettings();

		return {
			themeColors: settings.colors,
		};
	});

	const colors = [];

	if (themeColors && themeColors.length) {
		colors.push({ name: 'Theme', colors: themeColors });
	}

	return colors;
}

export default function ColorPalette(props) {
	const { value, alpha = false, palette = true, onChange = () => {} } = props;

	const colors = palette ? useColors() : [];

	return (
		<ApplyFilters name="ghostkit.component.color-palette" props={props}>
			<WPColorPalette
				colors={colors}
				value={value}
				enableAlpha={alpha}
				onChange={(val) => {
					onChange(val);
				}}
				__experimentalIsRenderedInSidebar
			/>
		</ApplyFilters>
	);
}
