import * as React from 'react';
import { ValidationState } from '../../../models/Validation';
import Slider, { SliderProps } from '../../../containers/slider/Slider';
import { Colors } from '../../../models/colors';
import { CommonInputProps } from '../../../containers/common-input/CommonInput';
import { inputWrapper, labelWrapper, stepUpDownButtons, rangeWrapper } from './sliderOne.style';
import Minus from '../../svg/minus/Minus';
import SliderInput from '../../common-inputs/slider-input/SilderInput';
import Plus from '../../svg/plus/Plus';
import MobileFooter from './inner-comps/footer/Footer';
import RcSlider from 'rc-slider';

type SliderOneProps = SliderProps & {
	automationName?: string;
	palette?: Colors;
	input?: React.ReactElement<CommonInputProps>;
	translator?: Function;
};

const SliderOne = (props: SliderOneProps) => (
	<Slider
		{...props}
		render={(
			sliderOnChange: (value: string) => void,
			inputOnBlur: (value: string) => void,
			inputOnChange: (name: string, value: string) => void,
			inputOnKeyDown: (value: string, e: React.KeyboardEvent<HTMLInputElement>) => void,
			stepUp: () => void,
			stepDown: () => void,
			inputValue: number,
			errorMessage?: string
		) => {
			return (
				<div data-automation={props.automationName}>
					<div className={labelWrapper(props.palette)}>
						<label>{props.label}:</label>
						<div className={inputWrapper}>
							<button type="button" onClick={stepDown} className={stepUpDownButtons(props.palette)}>
								<Minus palette={props.palette} />
							</button>
							{React.cloneElement(props.input || <SliderInput />, {
								onKeyDown: inputOnKeyDown,
								onBlur: inputOnBlur,
								onChange: inputOnChange,
								value: String(inputValue),
								name: props.name,
								palette: props.palette,
								input: <SliderInput />,
								errorMessage,
								valid: errorMessage ? ValidationState.Invalid : ValidationState.Valid,
								translator: props.translator
							})}
							<button
								type="button"
								value="+"
								onClick={stepUp}
								className={stepUpDownButtons(props.palette)}
							>
								<Plus palette={props.palette} />
							</button>
						</div>
						<div className="pseudo" aria-hidden="true" />{' '}
					</div>
					<div className={rangeWrapper(props.palette)}>
						<RcSlider
							min={props.sliderData.min}
							max={props.sliderData.max}
							step={props.sliderData.step}
							value={props.value}
							onChange={(value: any) => sliderOnChange(value)}
						/>
						<MobileFooter
							max={
								props.footerFormatter
									? props.footerFormatter(props.sliderData.max)
									: String(props.sliderData.max)
							}
							min={
								props.footerFormatter
									? props.footerFormatter(props.sliderData.min)
									: String(props.sliderData.min)
							}
							errorMessage={errorMessage}
							palette={props.palette}
						/>
					</div>
				</div>
			);
		}}
	/>
);

export default SliderOne;