import * as React from 'react';
import { ValidationRule, Validation, ValidationState } from '../../models/Validation';
import validationRules from '../../utils/validationRules';
import { validation } from '../../utils/helper';
import { Colors } from '../../models/colors';
import { SecondaryButtonProps } from '../../containers/secondary-button/SecondaryButton';
import { CommonInputProps } from '../../containers/common-input/CommonInput';
import { TooltipProps } from '../../containers/tooltip/Tooltip';
import TooltipOne from '../../components/tooltips/tooltip-one/TooltipOne';
import CommonInputLeftDot from '../../components/common-inputs/common-input-left-dot/CommonInputLeftDot';
import SecondaryButtonOne from '../../components/secondary-buttons/secondary-button-one/SecondaryButtonOne';
import { mobileWrapperStyle, authButtonStyles } from './mobile.style';
import { Query } from '../../models/query';

interface MobileProps {
	name: string;
	label?: string;
	type?: string;
	authenticationName?: string;
	authTokenName?: string;
	validationState?: { number?: Validation; pinCode?: Validation };
	placeholder?: string;
	validationRules?: Array<ValidationRule>;
	tooltipContent?: string;
	palette?: Colors;
	withAuthentication?: boolean;
	required?: boolean;
	automationName?: string;
	serverErrors?: string;
	value?: { number?: string; token?: string; pinCode?: string };
	sendAuthButton?: React.ReactElement<SecondaryButtonProps>;
	input?: React.ReactElement<CommonInputProps>;
	tooltip?: React.ReactElement<TooltipProps>;
	onChange?: (name: string, value: any) => void;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: React.ReactNode) => void;
	translator?: Function;
	checkIfTranslateExist?: Function;
	query?: Query;
}
export default class Mobile extends React.PureComponent<MobileProps> {
	private mobileValidationRules: ValidationRule[];
	constructor(props: MobileProps) {
		super(props);
		this.mobileValidationRules = this.props.validationRules || [{ name: 'phone' }];
	}

	clickSendAuth = () => {
		const { number } = this.props.value || { number: '' };
		let validationResults = validation(
			validationRules,
			this.mobileValidationRules,
			number,
			`${this.props.name}.number`
		);
		this.props.notifyValidity(
			validationResults.name,
			validationResults.state,
			validationResults.errorMessage
		);
		if (validationResults.state === ValidationState.Valid) this.sendAuthenticationCode(number);
	};

	setAuthCode = (authToken: string) => {
		this.props.onChange(this.props.name, Object.assign({}, this.props.value, { token: authToken }));
	};

	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 }));
	};

	sendAuthenticationCode = (mobile: string) => {
		if (mobile) {
			// axios
			// 	.post('/phone-authentication/sendPin', { data: mobile })
			// 	.then(response => {
			// 		this.setAuthCode(response.data.data.pinCode);
			// 	})
			// 	.catch(error => {});
			console.log(mobile);
		}
	};

	render() {
		let numberErrorMessage: string = '',
			numberValid = null,
			authValid = null,
			authErrorMessage = null,
			tooltip = null;

		if (this.props.validationState) {
			if (this.props.validationState.number) {
				numberErrorMessage = this.props.validationState.number.errorMessage;
				numberValid = this.props.validationState.number.state;
			}
			if (this.props.validationState.pinCode) {
				authErrorMessage = this.props.validationState.pinCode.errorMessage;
				authValid = this.props.validationState.pinCode.state;
			}
		}

		if (this.props.serverErrors) {
			numberErrorMessage = this.props.serverErrors;
			numberValid = ValidationState.Invalid;
			authValid = ValidationState.Invalid;
		}

		if (this.props.checkIfTranslateExist(`${this.props.name}.tooltip`)) {
			tooltip = React.cloneElement(this.props.tooltip || <TooltipOne />, {
				id: 'mobile',
				palette: this.props.palette,
				content: <p>{this.props.translator(`${this.props.name}.tooltip.content`)}</p>,
				translator: this.props.translator,
				query: this.props.query
			});
		}

		const { number, pinCode, token } = this.props.value || { number: '', pinCode: '', token: '' };

		const mobileInput = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			label: this.props.label || this.props.translator(`${this.props.name}.phoneLabel`),
			onChange: this.onChange,
			type: 'tel',
			name: `${this.props.name}.number`,
			valid: numberValid,
			errorMessage: numberErrorMessage,
			validationRules: this.mobileValidationRules,
			placeholder: this.props.placeholder || '',
			notifyValidity: this.props.notifyValidity,
			tooltip,
			palette: this.props.palette,
			value: number,
			required: this.props.required,
			maxlength: 11,
			automationName: `${this.props.automationName || this.props.name}`,
			translator: this.props.translator
		});

		if (!this.props.withAuthentication) return mobileInput;

		const authInput = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			label: this.props.label || this.props.translator(`${this.props.name}.authenticationLabel`),
			onChange: this.onChange,
			type: 'text',
			name: `${this.props.name}.pinCode`,
			valid: authValid,
			value: pinCode,
			errorMessage: authErrorMessage,
			validationRules: this.props.validationRules,
			placeholder: this.props.placeholder || '',
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			required: true,
			automationName: `${this.props.automationName || this.props.name}-auth-input`,
			translator: this.props.translator
		});

		const sendAuthButton = React.cloneElement(this.props.sendAuthButton || <SecondaryButtonOne />, {
			palette: this.props.palette,
			onClick: this.clickSendAuth,
			text: token ? `${this.props.name}.resendCode` : `${this.props.name}.sendCode`,
			automationName: `${this.props.automationName || this.props.name}-auth-button`,
			gtmId: 'send-auth-code-cta',
			translator: this.props.translator
		});

		return (
			<React.Fragment>
				<div className={mobileWrapperStyle()}>
					{mobileInput}
					<span className={authButtonStyles()}>{sendAuthButton}</span>
				</div>
				{authInput}
			</React.Fragment>
		);
	}
}