/**
 * External dependencies.
 */
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies.
 */
import InspectorColor from '@spectra-components/inspector-color';



/**
 * Element Sub-settings: Color settings for label.
 *
 * @param {Object} props The element props.
 * @since 2.0.0
 * @return {Element} The rendered block settings.
 */
const ColorSettings = memo( ( props ) => {

	// Destructure the required props.
	const {
		clientId,
		setAttributes,
		attributes: {
			textColor,
			textColorHover,
		},
		context = {},
	} = props;

	// Get parent context colors
	const parentLabelColor = context['spectra-pro/form/labelColor'];
	const parentLabelColorHover = context['spectra-pro/form/labelColorHover'];
	const parentTextColor = context['spectra-pro/form/textColor'];
	const parentTextColorHover = context['spectra-pro/form/textColorHover'];

	return(
		<InspectorColor
			settings={ [
				{
					colorValue: textColor || parentLabelColor || parentTextColor,
					label: __( 'Label Color', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { textColor: value } ),
					resetAllFilter: () => setAttributes( { textColor: undefined } ),
				},
				{
					colorValue: textColorHover || parentLabelColorHover || parentTextColorHover,
					label: __( 'Label Hover Color', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { textColorHover: value } ),
					resetAllFilter: () => setAttributes( { textColorHover: undefined } ),
				},
			] }
			panelId={ clientId }
		/>
	);
} );

/**
 * The Editor settings for this block.
 *
 * @param {Object} props The element props.
 * @since 2.0.0
 * @return {Element} The rendered settings.
 */
const Settings = ( props ) => (
	<>
		<ColorSettings { ...{ ...props } } />
	</>
);

export default memo( Settings );