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 { financialDetailsStyle } from './financial-details.style';
import AnnualRevenue from '../annual-revenue/AnnualRevenue';
import CommonInputLeftDot from '../../components/common-inputs/common-input-left-dot/CommonInputLeftDot';
import TooltipOne from '../../components/tooltips/tooltip-one/TooltipOne';
import AnnualProfit from '../annual-net-profit/AnnualProfit';
import MonthlyDebtRepayments from '../monthly-debt-repayments/MonthlyDebtRepayments';
import MinimumDirectorDividends from '../minimum-director-dividents/MinimumDirectorDividents';
import { Query } from '../../models/query';

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

export default class FinancialDetails extends React.PureComponent<FinancialDetailsProps> {
	constructor(props: FinancialDetailsProps) {
		super(props);
	}

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

	render() {
		const { annualProfit, annualRevenue, minimumDirectorDividends, monthlyDeptRepayments } = this
			.props.value || {
			annualProfit: null,
			annualRevenue: null,
			minimumDirectorDividends: null,
			monthlyDeptRepayments: null
		};

		const validationStates = this.props.validationState || {
			annualProfit: null,
			annualRevenue: null,
			minimumDirectorDividends: null,
			monthlyDeptRepayments: null
		};
		return (
			<div className={financialDetailsStyle(this.props.palette)}>
				<span>{this.props.label}</span>
				{this.props.hide.indexOf('annualRevenue') < 0 && (
					<AnnualRevenue
						name={`${this.props.name}.annualRevenue`}
						value={annualRevenue}
						palette={this.props.palette}
						input={<CommonInputLeftDot />}
						onChange={this.onChange}
						tooltip={this.props.tooltip || <TooltipOne />}
						required={true}
						validationState={validationStates.annualRevenue}
						notifyValidity={this.props.notifyValidity}
						getConfig={this.props.getConfig}
						translator={this.props.translator}
						query={this.props.query}
					/>
				)}
				{this.props.hide.indexOf('annualProfit') < 0 && (
					<AnnualProfit
						name={`${this.props.name}.annualProfit`}
						value={annualProfit}
						palette={this.props.palette}
						input={<CommonInputLeftDot />}
						onChange={this.onChange}
						tooltip={this.props.tooltip || <TooltipOne />}
						required={true}
						validationState={validationStates.annualProfit}
						notifyValidity={this.props.notifyValidity}
						getConfig={this.props.getConfig}
						translator={this.props.translator}
						query={this.props.query}
					/>
				)}
				{this.props.hide.indexOf('monthlyDeptRepayments') < 0 && (
					<MonthlyDebtRepayments
						name={`${this.props.name}.monthlyDeptRepayments`}
						value={monthlyDeptRepayments}
						palette={this.props.palette}
						input={<CommonInputLeftDot />}
						onChange={this.onChange}
						tooltip={this.props.tooltip || <TooltipOne />}
						validationState={validationStates.monthlyDeptRepayments}
						notifyValidity={this.props.notifyValidity}
						getConfig={this.props.getConfig}
						translator={this.props.translator}
						query={this.props.query}
					/>
				)}
				{this.props.hide.indexOf('minimumDirectorDividends') < 0 && (
					<MinimumDirectorDividends
						name={`${this.props.name}.minimumDirectorDividends`}
						value={minimumDirectorDividends}
						palette={this.props.palette}
						input={<CommonInputLeftDot />}
						onChange={this.onChange}
						tooltip={this.props.tooltip || <TooltipOne />}
						validationState={validationStates.minimumDirectorDividends}
						notifyValidity={this.props.notifyValidity}
						getConfig={this.props.getConfig}
						translator={this.props.translator}
						query={this.props.query}
					/>
				)}
			</div>
		);
	}
}