import * as React from 'react';
import { ValidationRule, Validation, ValidationState } from '../../models/Validation';
import { Colors } from '../../models/colors';
import { CommonInputProps } from '../../containers/common-input/CommonInput';
import { TooltipProps } from '../../containers/tooltip/Tooltip';
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';

const currencyFormatter = require('currency-formatter');

interface AnnualRevenueProps {
	name: string;
	label?: string;
	type?: string;
	value?: number;
	validationState?: Validation;
	placeholder?: string;
	validationRules?: Array<ValidationRule>;
	required?: boolean;
	tooltipContent?: string;
	palette?: Colors;
	automationName?: string;
	input?: React.ReactElement<CommonInputProps>;
	tooltip?: React.ReactElement<TooltipProps>;
	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 AnnualRevenue = (props: AnnualRevenueProps) => {
	const name = props.name || 'annual-profit';
	let tooltip = null;
	let { annualRevenueMinAmount, currency } = props.getConfig([
		'annualRevenueMinAmount',
		'currency'
	]);
	let formattedMinAmount = currencyFormatter.format(annualRevenueMinAmount, {
		code: currency,
		precision: 0
	});
	tooltip = React.cloneElement(props.tooltip || <TooltipOne />, {
		id: 'annual-profit',
		palette: props.palette,
		content: props.translator(`${name}.tooltip.content`, { value: formattedMinAmount }),
		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 || [
					{ name: 'required' },
					{
						name: 'minNumber',
						data: { formatted: formattedMinAmount, minValue: annualRevenueMinAmount, currency }
					}
				]
			}
			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 AnnualRevenue;
