import * as React from 'react';
import CommonInput, { CommonInputProps } from '../../../containers/common-input/CommonInput';
import { inputStyle } from './sliderInput.style';

const SliderInput = (props: CommonInputProps) => {
	return (
		<CommonInput
			{...props}
			render={(
				onChange: (value: string, e?: React.ChangeEvent<HTMLInputElement>) => void,
				onBlur: (value: string, e?: React.FocusEvent<HTMLInputElement>) => void
			) => {
				return (
					<input
						className={inputStyle(props.palette, props.valid)}
						onBlur={e => onBlur(e.target.value)}
						onChange={e => onChange(e.target.value)}
						onKeyDown={e => props.onKeyDown((e.target as HTMLInputElement).value, e)}
						value={props.value}
						type="text"
					/>
				);
			}}
		/>
	);
};

export default SliderInput;