import React, { Fragment } from 'react';
import { InsertionPoint } from './placements.models';
import { Grid, Text } from 'dot-design-system';
import {
	isNonBlockInsertion,
	isNumeralInsertion,
	resolveInsertionPointLabel,
} from './placements.utils';

interface Props {
	insertionPoint?: InsertionPoint;
	onInsertionPointChange: (newInsertionPoint: InsertionPoint) => void;
	insertionNumber?: number;
	onInsertionNumberChange: (newInsertionNumber: number) => void;
}

function PlacementSelectInsertion({
	insertionPoint,
	insertionNumber,
	onInsertionPointChange,
	onInsertionNumberChange,
}: Props) {
	let columnLayout = '1fr 50px';

	if (isNonBlockInsertion(insertionPoint as InsertionPoint)) {
		columnLayout = '1fr';
	}

	return (
		<Fragment>
			<Grid columnLayout={columnLayout}>
				<select
					defaultValue={insertionPoint}
					name=''
					id=''
					onChange={(event) =>
						onInsertionPointChange(event.target.value as InsertionPoint)
					}
				>
					{Object.values(InsertionPoint).map((point) => {
						let label = resolveInsertionPointLabel(point);

						if (isNonBlockInsertion(point)) {
							label = `${label} (Classic Editor compatible)`;
						}

						return (
							<option key={point} value={point}>
								{label}
							</option>
						);
					})}
				</select>
				{isNumeralInsertion(insertionPoint as InsertionPoint) &&
					!isNonBlockInsertion(insertionPoint as InsertionPoint) && (
						<input
							type='number'
							defaultValue={insertionNumber}
							onChange={(event) =>
								onInsertionNumberChange(Number(event.target.value))
							}
						/>
					)}
			</Grid>
			{/*{!isNonBlockInsertion(insertionPoint as InsertionPoint) && (*/}
			{/*	<Text component={'em'}>This position requires the use of Wordpress Blocks.</Text>*/}
			{/*)}*/}
		</Fragment>
	);
}

export default PlacementSelectInsertion;