/**
 * Form fields for one pricing rule (SPEC §5): margin, VAT, rounding,
 * existing sale price policy, guardrails. Reused for both the supplier's
 * default rule and each category override in RulesStep.
 */

import {
	RadioControl,
	SelectControl,
	TextControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const ROUNDING_MODES = [
	{ label: __( 'None', 'emberprice' ), value: 'none' },
	{ label: __( 'Decimals', 'emberprice' ), value: 'decimals' },
	{
		label: __( 'Psychological (.99 / .90)', 'emberprice' ),
		value: 'psychological',
	},
	{ label: __( 'Multiple', 'emberprice' ), value: 'multiple' },
];

const SALE_POLICIES = [
	{ label: __( 'Keep', 'emberprice' ), value: 'keep' },
	{
		label: __( 'Remove if it exceeds the new price', 'emberprice' ),
		value: 'remove_if_exceeds',
	},
	{
		label: __( 'Scale proportionally', 'emberprice' ),
		value: 'scale_proportionally',
	},
];

const GUARDRAIL_MODES = [
	{ label: __( 'Both directions', 'emberprice' ), value: 'both' },
	{ label: __( 'Increases only', 'emberprice' ), value: 'increase_only' },
	{ label: __( 'Decreases only', 'emberprice' ), value: 'decrease_only' },
];

export default function RuleFields( { value, onChange } ) {
	const set = ( key ) => ( newValue ) =>
		onChange( { ...value, [ key ]: newValue } );
	const setNumber = ( key ) => ( newValue ) =>
		onChange( { ...value, [ key ]: parseFloat( newValue ) || 0 } );

	return (
		<div className="embp-rule-fields">
			<RadioControl
				label={ __( 'Margin', 'emberprice' ) }
				selected={ value.marginType }
				options={ [
					{
						label: __( 'Percentage', 'emberprice' ),
						value: 'percentage',
					},
					{
						label: __( 'Fixed amount', 'emberprice' ),
						value: 'fixed',
					},
				] }
				onChange={ set( 'marginType' ) }
			/>
			<TextControl
				label={
					'percentage' === value.marginType
						? __( 'Margin %', 'emberprice' )
						: __( 'Margin amount', 'emberprice' )
				}
				type="number"
				min="0"
				max={
					'percentage' === value.marginType ? '1000' : '1000000000'
				}
				step="0.01"
				value={ value.marginValue }
				onChange={ setNumber( 'marginValue' ) }
				__next40pxDefaultSize
				__nextHasNoMarginBottom
			/>

			<TextControl
				label={ __( 'VAT rate %', 'emberprice' ) }
				type="number"
				min="0"
				max="100"
				step="0.01"
				value={ value.vatRate }
				onChange={ setNumber( 'vatRate' ) }
				__next40pxDefaultSize
				__nextHasNoMarginBottom
			/>

			<SelectControl
				label={ __( 'Rounding', 'emberprice' ) }
				value={ value.roundingMode }
				options={ ROUNDING_MODES }
				onChange={ set( 'roundingMode' ) }
				__next40pxDefaultSize
				__nextHasNoMarginBottom
			/>

			{ 'decimals' === value.roundingMode && (
				<TextControl
					label={ __( 'Decimals', 'emberprice' ) }
					type="number"
					min="0"
					max="4"
					step="1"
					value={ value.roundingDecimals }
					onChange={ setNumber( 'roundingDecimals' ) }
					__next40pxDefaultSize
					__nextHasNoMarginBottom
				/>
			) }

			{ 'psychological' === value.roundingMode && (
				<SelectControl
					label={ __( 'Ending', 'emberprice' ) }
					value={ String( value.roundingEnding ) }
					options={ [
						{ label: '.99', value: '0.99' },
						{ label: '.90', value: '0.90' },
					] }
					onChange={ ( ending ) =>
						onChange( {
							...value,
							roundingEnding: parseFloat( ending ),
						} )
					}
					__next40pxDefaultSize
					__nextHasNoMarginBottom
				/>
			) }

			{ 'multiple' === value.roundingMode && (
				<TextControl
					label={ __(
						'Round to the nearest multiple of',
						'emberprice'
					) }
					type="number"
					min="0.0001"
					max="1000000000"
					step="0.01"
					value={ value.roundingMultiple }
					onChange={ setNumber( 'roundingMultiple' ) }
					__next40pxDefaultSize
					__nextHasNoMarginBottom
				/>
			) }

			<SelectControl
				label={ __( 'Existing sale price', 'emberprice' ) }
				value={ value.salePricePolicy }
				options={ SALE_POLICIES }
				onChange={ set( 'salePricePolicy' ) }
				__next40pxDefaultSize
				__nextHasNoMarginBottom
			/>

			<TextControl
				label={ __(
					'Max change % before forcing review',
					'emberprice'
				) }
				type="number"
				min="0"
				max="1000"
				step="0.01"
				value={ value.guardrailsMaxChangePercent }
				onChange={ setNumber( 'guardrailsMaxChangePercent' ) }
				__next40pxDefaultSize
				__nextHasNoMarginBottom
			/>

			<SelectControl
				label={ __( 'Allowed price direction', 'emberprice' ) }
				value={ value.guardrailsMode }
				options={ GUARDRAIL_MODES }
				onChange={ set( 'guardrailsMode' ) }
				__next40pxDefaultSize
				__nextHasNoMarginBottom
			/>
		</div>
	);
}
