import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Card, CardBody, Flex, TextControl } from '@wordpress/components';
import {
	getIdentifierHelp,
	productIdentifierProblemMessage,
	validateProductIdentifier,
	type ProductIdentifierFieldState,
	type ProductIdentifierKey,
	type ProductIdentifierLine,
} from '../../../shared/utils/productIdentifierLines';

export type ProductIdentifierChange = (
	itemIndex: number,
	key: ProductIdentifierKey,
	value: string,
	/** `validate: false` stores the edit without validating, for a form that validates on submit. */
	options?: { validate?: boolean }
) => void;

const mutedText = { fontSize: 12, color: '#646970', margin: 0 };

function IdentifierField({
	itemIndex,
	field,
	onChange,
}: {
	itemIndex: number;
	field: ProductIdentifierFieldState;
	onChange: ProductIdentifierChange;
}) {
	const [draft, setDraft] = useState(field.value);
	const [touched, setTouched] = useState(false);

	useEffect(() => setDraft(field.value), [field.value]);

	const problem = touched
		? validateProductIdentifier(draft, field.required)
		: undefined;

	return (
		<TextControl
			id={`p2g-identifier-${itemIndex}-${field.key}`}
			label={
				field.required
					? `${field.label} *`
					: `${field.label} ${__('(optional)', 'parcel2go-shipping')}`
			}
			value={draft}
			onChange={setDraft}
			onBlur={() => {
				setTouched(true);
				if (draft.trim() !== field.value.trim()) {
					onChange(itemIndex, field.key, draft);
				}
			}}
			maxLength={field.maxLength}
			autoComplete="off"
			help={
				problem ? (
					<span style={{ color: '#cc1818' }} role="alert">
						{productIdentifierProblemMessage(field.label, problem)}
					</span>
				) : (
					getIdentifierHelp(field.key)
				)
			}
			__next40pxDefaultSize
			__nextHasNoMarginBottom
		/>
	);
}

interface ProductIdentifiersSectionProps {
	lines: ProductIdentifierLine[];
	blocking: boolean;
	onChange: ProductIdentifierChange;
	/** Render without its own card, to sit inside one that already is. */
	bare?: boolean;
}

/**
 * The EU customs identifier fields, from `deriveProductIdentifierLines`. An edit is handed back
 * when the customer leaves a field. Renders nothing when no item needs a code.
 */
export default function ProductIdentifiersSection({
	lines,
	blocking,
	onChange,
	bare = false,
}: ProductIdentifiersSectionProps) {
	if (lines.length === 0) {
		return null;
	}

	const content = (
		<Flex direction="column" gap={3}>
			<strong>
				{__('Product codes for EU customs', 'parcel2go-shipping')}
			</strong>
			<p style={mutedText}>
				{__(
					'EU customs asks for these codes for each item. We use what is in your products where we can find it. Changes here apply to this booking only; to keep them, update the product.',
					'parcel2go-shipping'
				)}
			</p>

			{lines.map((line) => (
				<Flex key={line.itemIndex} direction="column" gap={2}>
					<strong style={{ fontSize: 13 }}>{line.name}</strong>
					{line.fields.map((field) => (
						<IdentifierField
							key={field.key}
							itemIndex={line.itemIndex}
							field={field}
							onChange={onChange}
						/>
					))}
				</Flex>
			))}

			{blocking && (
				<p style={{ ...mutedText, color: '#996800' }}>
					{__(
						'Enter the required codes to continue.',
						'parcel2go-shipping'
					)}
				</p>
			)}
		</Flex>
	);

	return bare ? (
		content
	) : (
		<Card size="small" style={{ background: '#f6f7f7' }}>
			<CardBody>{content}</CardBody>
		</Card>
	);
}