/**
 * External dependencies.
 */
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
	InspectorControls,
} from '@wordpress/block-editor';
import {
	__experimentalToolsPanel as ToolsPanel,
	__experimentalToolsPanelItem as ToolsPanelItem,
	ToggleControl,
	TextControl,
} from '@wordpress/components';

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

/**
 * Element Sub-settings: Color settings that integrate with parent form context.
 *
 * @param {Object} props The element props.
 * @since 2.0.0
 * @return {Element} The rendered color settings.
 */
const ColorSettings = memo( ( props ) => {
	const {
		clientId,
		setAttributes,
		attributes,
		context = {}
	} = props;

	// Get context colors from parent register form
	const {
		'spectra-pro/form/textColorHover': parentTextColorHover,
		'spectra-pro/form/checkboxBackgroundColor': parentCheckboxBgColor,
	} = context;

	const {
		textColorHover,
		checkboxBackgroundColor,
		checkboxCheckmarkColor,
	} = attributes;

	return (
		<InspectorColor
			settings={ [
				{
					colorValue: textColorHover || parentTextColorHover,
					label: __( 'Text Hover', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { textColorHover: value } ),
					resetAllFilter: () => setAttributes( { textColorHover: undefined } ),
				},
				{
					colorValue: checkboxBackgroundColor || parentCheckboxBgColor,
					label: __( 'Checkbox Background', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { checkboxBackgroundColor: value } ),
					resetAllFilter: () => setAttributes( { checkboxBackgroundColor: undefined } ),
				},
				{
					colorValue: checkboxCheckmarkColor,
					label: __( 'Checkmark Color', 'spectra-pro' ),
					onColorChange: ( value ) => setAttributes( { checkboxCheckmarkColor: value } ),
					resetAllFilter: () => setAttributes( { checkboxCheckmarkColor: undefined } ),
				},
			] }
			panelId={ clientId }
		/>
	);
} );

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

	// Destructure the required props.
	const { clientId, setAttributes, attributes } = props;

	const {
		checkboxLabel,
		checkboxValue,
		isRequired,
	} = attributes;

	return (
		<>
			<InspectorControls group='settings'>
				<ToolsPanel
					label={ __( 'Form Checkbox', 'spectra-pro' ) }
					resetAll={ () => {
						setAttributes( {
							checkboxType: 'terms',
							checkboxLabel: 'I Accept the Terms and Conditions',
							checkboxValue: false,
							isRequired: true,
							hideLabel: false
						} );
					} }
					panelId={ clientId }
				>
					<ToolsPanelItem
						hasValue={ () => !! checkboxLabel && checkboxLabel !== 'I Accept the Terms and Conditions' }
						label={ __( 'Checkbox Label', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( { checkboxLabel: 'I Accept the Terms and Conditions' } ) }
						isShownByDefault
					>
						<TextControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={ __( 'Checkbox Label', 'spectra-pro' ) }
							value={ checkboxLabel }
							onChange={ ( value ) => setAttributes( { checkboxLabel: value } ) }
							placeholder={ __( 'Enter checkbox label', 'spectra-pro' ) }
						/>
					</ToolsPanelItem>

					<ToolsPanelItem
						hasValue={ () => checkboxValue !== false }
						label={ __( 'Default Checked', 'spectra-pro' ) }
						panelId={ clientId }
						onDeselect={ () => setAttributes( { checkboxValue: false } ) }
					>
						<ToggleControl
							__nextHasNoMarginBottom
							checked={ checkboxValue }
							label={ __( 'Checked by Default', 'spectra-pro' ) }
							onChange={ () => setAttributes( { checkboxValue: ! checkboxValue } ) }
						/>
					</ToolsPanelItem>

					<ToolsPanelItem
						hasValue={ () => isRequired !== true }
						label={ __( 'Required', 'spectra-pro' ) }
						panelId={ clientId }
						isShownByDefault
						onDeselect={ () => setAttributes( { isRequired: true } ) }
					>
						<ToggleControl
							__nextHasNoMarginBottom
							checked={ isRequired }
							label={ __( 'Required Field', 'spectra-pro' ) }
							onChange={ () => setAttributes( { isRequired: ! isRequired } ) }
						/>
					</ToolsPanelItem>
				</ToolsPanel>
			</InspectorControls>
		</>
	);
} );

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

export default memo( Settings );