import { Card } from '@admin/components/Card';
import { SettingRow } from './SettingRow';
import { SectionCaption } from '@admin/components/SectionCaption';
import { Switch } from '@admin/components/Switch';
import { Select } from '@admin/components/Select';
import { TextInput } from '@admin/components/TextInput';
import { RadioOption } from '@admin/components/RadioOption';
import { Checkbox } from '@admin/components/Checkbox';

const noop = () => {};

function CheckboxGroupControl( { row } ) {
	return (
		<div className="flex flex-wrap gap-x-4 gap-y-2">
			{ row.options.map( ( option ) => (
				<Checkbox
					key={ option.label }
					checked={ option.checked }
					onChange={ noop }
					label={ option.label }
					disabled
				/>
			) ) }
		</div>
	);
}

function SelectControl( { row } ) {
	return (
		<Select
			value={ row.value }
			options={ row.options }
			onChange={ noop }
			disabled
			label={ row.label }
		/>
	);
}

function TextControl( { row } ) {
	return (
		<TextInput
			value={ row.value }
			suffix={ row.suffix }
			onChange={ noop }
			disabled
			label={ row.label }
			style={ { width: 110 } }
		/>
	);
}

function SwitchControl( { row } ) {
	return (
		<Switch
			checked={ row.checked }
			onChange={ noop }
			disabled
			label={ row.label }
		/>
	);
}

const PREVIEW_CONTROLS = {
	checkboxGroup: CheckboxGroupControl,
	select: SelectControl,
	text: TextControl,
};

function PreviewRow( { row } ) {
	const Control = PREVIEW_CONTROLS[ row.type ] ?? SwitchControl;

	return (
		<SettingRow label={ row.label } description={ row.description }>
			<Control row={ row } />
		</SettingRow>
	);
}

/**
 * A disabled, non-interactive preview of a tab's real future fields (from the approved settings mockup) — not backed by the schema/registry, purely illustrative. Rendered blurred behind the UpsellModal.
 *
 * @param {Object} props
 * @param {Array}  props.groups Each: { id, label, rows } or
 *                              { id, label, block: { description, radioOptions } }.
 */
export function PreviewFields( { groups } ) {
	return (
		<div
			className="pointer-events-none blur-[1px] select-none"
			aria-hidden="true"
		>
			{ groups.map( ( group ) => (
				<div key={ group.id }>
					<SectionCaption>{ group.label }</SectionCaption>
					<Card className="p-0 mb-8">
						{ group.block ? (
							<SettingRow
								layout="block"
								description={ group.block.description }
							>
								{ group.block.radioOptions.map( ( option ) => (
									<RadioOption
										key={ option.title }
										name={ group.id }
										checked={ option.checked }
										onChange={ noop }
										title={ option.title }
										description={ option.description }
										disabled
									/>
								) ) }
							</SettingRow>
						) : (
							group.rows.map( ( row ) => (
								<PreviewRow key={ row.label } row={ row } />
							) )
						) }
					</Card>
				</div>
			) ) }
		</div>
	);
}