import * as React from 'react';
import { ValidationRule, Validation, ValidationState } from '../../models/Validation';
import { Colors } from '../../models/colors';
import { TooltipProps } from '../../containers/tooltip/Tooltip';
import { CommonInputProps } from '../../containers/common-input/CommonInput';
import TooltipOne from '../../components/tooltips/tooltip-one/TooltipOne';
import InputWithCurrency from '../../components/common-inputs/input-with-currency/InputWithCurrency';
import CommonInputLeftDot from '../../components/common-inputs/common-input-left-dot/CommonInputLeftDot';
import { Query } from '../../models/query';

interface MonthlyDebtRepaymentsProps {
	name: string;
	label?: string;
	type?: string;
	value?: number;
	validationState?: Validation;
	placeholder?: string;
	validationRules?: Array<ValidationRule>;
	required?: boolean;
	palette?: Colors;
	automationName?: string;
	tooltip?: React.ReactElement<TooltipProps>;
	input?: React.ReactElement<CommonInputProps>;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	onChange?: (name: string, value: string) => void;
	getConfig?: (name: string | string[]) => { [key: string]: any };
	translator?: Function;
	checkIfTranslateExist?: Function;
	query?: Query;
}

const MonthlyDebtRepayments = (props: MonthlyDebtRepaymentsProps) => {
	const name = props.name || 'monthlyDeptRepayments';
	const { currency } = props.getConfig(['currency']);
	let tooltip = null;

	tooltip = React.cloneElement(props.tooltip || <TooltipOne />, {
		id: 'monthly-debt-repayments',
		palette: props.palette,
		content: <p>{props.translator(`${name}.tooltip.content`)}</p>,
		translator: props.translator,
		query: props.query
	});

	return (
		<InputWithCurrency
			translator={props.translator}
			currency={currency}
			automationName={props.automationName || name}
			label={props.translator(`${name}.label`)}
			onChange={props.onChange}
			type="text"
			name={name}
			validationRules={props.validationRules}
			placeholder={props.placeholder}
			notifyValidity={props.notifyValidity}
			tooltip={tooltip}
			palette={props.palette}
			value={props.value ? String(props.value) : ''}
			valid={props.validationState && props.validationState.state}
			required={props.required}
			input={props.input || <CommonInputLeftDot />}
			errorMessage={props.validationState && props.validationState.errorMessage}
		/>
	);
};

export default MonthlyDebtRepayments;