/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { addFilter } from "@wordpress/hooks";
import { useState } from "@wordpress/element";
import { TextControl, Notice, Flex, FlexItem, Tooltip, Icon } from "@wordpress/components";
import { help } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import { hasOtherBlockAtts } from './../utils/index';

/**
 * Checks for Lead Scores as part of required PersonalizeWP logic.
 *
 * @param {Object} attributes All original PWP attributes
 * @return {boolean} Return True if the attributes validate for Lead Scores
 */
const checkRequiredLeadScores = ( required, attributes ) => {
	if ( ( Object.hasOwn( attributes, 'minScore' ) && '' !== attributes.minScore ) ||
			( Object.hasOwn( attributes, 'maxScore' ) && '' !== attributes.maxScore ) ) {
		return true;
	}
	// Return original
	return required;
}
addFilter(
	'personalizeWP.hasRequiredFields',
	'personalizewp/check-for-lead-scores',
	checkRequiredLeadScores
);

/**
 * Render the Lead Scores inspector controls.
 *
 * @since 2.6.0
 * @param {Object} props All the props passed to this function
 */
export default function LeadScoresControls( props ) {
	const {
		blockAtts,
		setPersonalizeWPAtts
	} = props;

	// Pass scores through React state to suppress errors.
	const [ minScore, setMinScore ] = useState( blockAtts.minScore );
	const [ maxScore, setMaxScore ] = useState( blockAtts.maxScore );

	/**
	 * Validates the minimum and maximum score inputs, displaying a notice if invalid.
	 */
	const ValidateScores = () => {
		const min = minScore ? parseInt( minScore, 10 ) : '';
		const max = maxScore ? parseInt( maxScore, 10 ) : '';
		// If both min and max set, ensure min is less than.
		if ( '' !== min && '' !== max && max < min ) {
			return (
				<div className="score-error">
					<Notice status="error" isDismissible={false}>
						{ __( 'The maximum score must be greater than the minimum score.', 'personalizewp' ) }
					</Notice>
				</div>
			);
		}

		return '';
	};

	// These controls can be marked as inert if settings have been made elsewhere.
	const inert = hasOtherBlockAtts( blockAtts, [ 'minScore', 'maxScore' ] );

	return (
		<div className="pwp-panel lead-scoring">
			<Flex direction="row" align="flex-start">
				<h3>{ __( 'Lead Score', 'personalizewp' ) }</h3>
				<Tooltip
					delay={200}
					text={__("This will return true if the user meets the lead score criteria. You can set positive or negative values.", "personalizewp")}
					className="pwp-tooltip"
					placement="bottom-end">
					<div>
						<Icon icon={ help } size={ 20 } />
					</div>
				</Tooltip>
			</Flex>
			<Flex direction="row">
				<FlexItem>
					<TextControl
						label={ __( 'Min Score', 'personalizewp' ) }
						placeholder={ __( 'Enter value', 'personalizewp' ) }
						type="number"
						step="1"
						value={minScore}
						autoComplete="off"
						onChange={ (value) => {
								setMinScore( value );
								setPersonalizeWPAtts( { minScore: value } );
							}
						}
						disabled={ inert }
						__nextHasNoMarginBottom
					></TextControl>
				</FlexItem>
				<FlexItem>
					<TextControl
						label={ __( 'Max Score', 'personalizewp' ) }
						placeholder={ __( 'Enter value', 'personalizewp' ) }
						type="number"
						step="1"
						value={maxScore}
						autoComplete="off"
						onChange={(value) => {
								setMaxScore( value );
								setPersonalizeWPAtts( { maxScore: value } );
							}
						}
						disabled={ inert }
						__nextHasNoMarginBottom
					></TextControl>
				</FlexItem>
			</Flex>
			<ValidateScores />
		</div>
	);
}
