import * as React from 'react';

import { Colors } from '../../models/colors';
import { Query } from '../../models/query';
import { SliderProps } from '../../containers/slider/Slider';
import SliderOne from '../../components/sliders/slider-one/SliderOne';
import InputWithCurrency from '../../components/common-inputs/input-with-currency/InputWithCurrency';
import { wrapperStyle, footerStyle } from './amountPeriodSliders.style';
import { connect } from 'react-redux';

interface AmountPeriodSlidersProps {
	name: string;
	palette?: Colors;
	automationName?: string;
	query?: Query;
	value?: { term?: number; amount?: number };
	slider?: React.ReactElement<SliderProps>;
	onChange?: (name: string, value: any) => void;
	getConfig?: (name: string | string[]) => { [key: string]: any };
	translator?: Function;
	checkIfTranslateExist?: Function;
}

class AmountPeriodSlider extends React.Component<AmountPeriodSlidersProps> {
	shouldComponentUpdate(nextProps: AmountPeriodSlidersProps) {
		return this.props.value !== nextProps.value || this.props.query !== nextProps.query;
	}

	onChange = (name: string, value: string) => {
		let sliderData = this.props.value;
		this.props.onChange(this.props.name, Object.assign({}, sliderData, { [name]: value }));
	};

	render() {
		const {
			minPeriod,
			maxPeriod,
			periodStep,
			initialPeriod,
			minAmount,
			maxAmount,
			amountStep,
			initialAmount,
			currency
		} = this.props.getConfig([
			'minPeriod',
			'maxPeriod',
			'periodStep',
			'initialPeriod',
			'minAmount',
			'maxAmount',
			'amountStep',
			'initialAmount',
			'currency'
		]);
		const { amount, term } = this.props.value || {
			amount: initialAmount,
			term: initialPeriod
		};
		const AmountSlider = React.cloneElement(this.props.slider || <SliderOne />, {
			label: this.props.translator(`${this.props.name}.amount.label`),
			errorMessage: {
				min: this.props.translator(`${this.props.name}.amount.errorMessage.min`, {
					value: minAmount.toLocaleString()
				}),
				max: this.props.translator(`${this.props.name}.amount.errorMessage.max`, {
					value: maxAmount.toLocaleString()
				})
			},
			onChange: this.onChange,
			name: 'amount',
			palette: this.props.palette,
			value: amount,
			sliderData: {
				min: minAmount,
				max: maxAmount,
				step: amountStep,
				initialValue: initialAmount
			},
			footerFormatter: (value: number) => value.toLocaleString(),
			input: <InputWithCurrency currency={currency} translator={this.props.translator} />,
			query: this.props.query,
			translator: this.props.translator
		});

		const PeriodSlider = React.cloneElement(this.props.slider || <SliderOne />, {
			label: this.props.translator(`${this.props.name}.term.label`),
			errorMessage: {
				min: this.props.translator(`${this.props.name}.term.errorMessage.min`, {
					value: minPeriod.toLocaleString()
				}),
				max: this.props.translator(`${this.props.name}.term.errorMessage.max`, {
					value: maxPeriod.toLocaleString()
				})
			},
			onChange: this.onChange,
			name: 'term',
			palette: this.props.palette,
			value: term,
			sliderData: {
				min: minPeriod,
				max: maxPeriod,
				step: periodStep,
				initialValue: initialPeriod
			},
			footerFormatter: (value: number) => value,
			query: this.props.query,
			translator: this.props.translator
		});

		return (
			<div className={wrapperStyle}>
				{AmountSlider}
				{PeriodSlider}
				<footer className={footerStyle(this.props.palette)}>
					<p>
						{this.props.translator(`${this.props.name}.footer.text1`)}
						<a
							href="https://www.esmeloans.com/business-loan-calculator/"
							rel="noopener noreferrer"
							target="_blank"
						>
							{this.props.translator(`${this.props.name}.footer.link`)}
						</a>
						{this.props.translator(`${this.props.name}.footer.text2`)}
					</p>
				</footer>
			</div>
		);
	}
}

export default AmountPeriodSlider;