import { TextField } from "@mui/material";
import { ChangeEvent, FC, Fragment } from "react";

import { applyFilter } from "../../lib";
import { IProps, label } from "../../model";

export const NumberBetween: FC<Omit<IProps, "label">> = ({
	setValue,
	value,
}) => {
	function onChange1(event: ChangeEvent<HTMLInputElement>) {
		const newValue = { ...value, 1: event.target.value };
		setValue(newValue);
		applyFilter(newValue);
	}
	function onChange2(event: ChangeEvent<HTMLInputElement>) {
		const newValue = { ...value, 2: event.target.value };
		setValue(newValue);
		applyFilter(newValue);
	}

	return (
		<Fragment>
			<TextField
				label={label.from}
				value={value[1]}
				type={"number"}
				onChange={onChange1}
				size={"small"}
				autoComplete={"off"}
			/>
			<TextField
				label={label.to}
				value={value[2]}
				type={"number"}
				onChange={onChange2}
				size={"small"}
				autoComplete={"off"}
			/>
		</Fragment>
	);
};