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

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

/**
 * The color settings.
 *
 * @since x.x.x
 *
 * @param {Object} props The element props.
 * @return {Element} The rendered settings.
 */
const ColorSettings = memo( ( props ) => {
	const {
		clientId,
		setAttributes,
		attributes: {
			textColor,
			textColorHover,
			textColorActive,
			backgroundColor,
			backgroundColorHover,
			backgroundColorActive,
			backgroundColorSecondary,
			backgroundColorSecondaryHover,
			backgroundGradient,
			backgroundGradientHover,
			backgroundGradientActive,
			backgroundGradientSecondary,
			backgroundGradientSecondaryHover,
		},
	} = props;

	return (
		<InspectorColor
			settings={ [
				{
					colorValue: textColor,
					label: __( 'Button Text', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { textColor: value } ),
					resetAllFilter: () =>
						setAttributes( { textColor: undefined } ),
				},
				{
					colorValue: textColorHover,
					label: __( 'Button Text Hover', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { textColorHover: value } ),
					resetAllFilter: () =>
						setAttributes( { textColorHover: undefined } ),
				},
				{
					colorValue: textColorActive,
					label: __( 'Button Text Active', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { textColorActive: value } ),
					resetAllFilter: () =>
						setAttributes( {
							textColorActive: undefined,
						} ),
				},
				{
					colorValue: backgroundColor,
					gradientValue: backgroundGradient,
					label: __( 'Button Background', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { backgroundColor: value } ),
					onGradientChange: ( value ) =>
						setAttributes( { backgroundGradient: value } ),
					resetAllFilter: () =>
						setAttributes( {
							backgroundColor: undefined,
							backgroundGradient: undefined,
						} ),
				},
				{
					colorValue: backgroundColorHover,
					gradientValue: backgroundGradientHover,
					label: __( 'Button Background Hover', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( {
							backgroundColorHover: value,
						} ),
					onGradientChange: ( value ) =>
						setAttributes( {
							backgroundGradientHover: value,
						} ),
					resetAllFilter: () =>
						setAttributes( {
							backgroundColorHover: undefined,
							backgroundGradientHover: undefined,
						} ),
				},
				{
					colorValue: backgroundColorActive,
					gradientValue: backgroundGradientActive,
					label: __( 'Button Background Active', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( {
							backgroundColorActive: value,
						} ),
					onGradientChange: ( value ) =>
						setAttributes( {
							backgroundGradientActive: value,
						} ),
					resetAllFilter: () =>
						setAttributes( {
							backgroundColorActive: undefined,
							backgroundGradientActive: undefined,
						} ),
				},
				{
					colorValue: backgroundColorSecondary,
					gradientValue: backgroundGradientSecondary,
					label: __( 'Background', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( { backgroundColorSecondary: value } ),
					onGradientChange: ( value ) =>
						setAttributes( { backgroundGradientSecondary: value } ),
					resetAllFilter: () =>
						setAttributes( {
							backgroundColorSecondary: undefined,
							backgroundGradientSecondary: undefined,
						} ),
				},
				{
					colorValue: backgroundColorSecondaryHover,
					gradientValue: backgroundGradientSecondaryHover,
					label: __( 'Background Hover', 'spectra-pro' ),
					onColorChange: ( value ) =>
						setAttributes( {
							backgroundColorSecondaryHover: value,
						} ),
					onGradientChange: ( value ) =>
						setAttributes( {
							backgroundGradientSecondaryHover: value,
						} ),
					resetAllFilter: () =>
						setAttributes( {
							backgroundColorSecondaryHover: undefined,
							backgroundGradientSecondaryHover: undefined,
						} ),
				},
			] }
			panelId={ clientId }
		/>
	);
} );
/**
 * The Editor settings.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered settings.
 */
const Settings = ( props ) => <ColorSettings { ...{ ...props } } />;

export default memo( Settings );
