import React from 'react';

import { BuilderModule, PropOther } from '../../../@types/settings.js';

import './CtrlNumber.scss';

type ControlProps = {
	updateProps: (id: string, path: string, value: any) => void;
	deleteProp: (path: string) => void;
	currMod: BuilderModule;
	updatePath: string;
	prop: PropOther;
	value: any;
	inheritVal?: boolean;
};

export default function CtrlNumber({
	currMod,
	updatePath,
	prop,
	value,
	inheritVal,
	deleteProp,
	updateProps,
}: ControlProps) {
	return (
		<input
			key={currMod.id + updatePath}
			type='number'
			className='ctrl-number__input-field'
			placeholder={inheritVal ? value : ''}
			value={inheritVal ? '' : value}
			onChange={(e) => {
				if (e.target.value && e.target.value.trim().length > 0) {
					updateProps(currMod.id, updatePath, e.target.valueAsNumber);
					return;
				}

				deleteProp(updatePath);
			}}
		/>
	);
}
