import * as React from 'react';
import { ValidationRule, Validation, ValidationState } from '../../models/Validation';
import { Colors } from '../../models/colors';
import { RadioButtonProps } from '../../containers/radio-button/RadioButton';
import FlatRadioButton from '../../components/radio-buttons/flat-radio-button/FlatRadioButton';

interface GenderProps {
	name: string;
	label?: string;
	type?: string;
	validationStates?: { [name: string]: Validation };
	validationRules?: Array<ValidationRule>;
	required?: boolean;
	palette?: Colors;
	automationName?: string;
	defaultOption?: string;
	value?: string;
	radioButtons?: React.ReactElement<RadioButtonProps>;
	onChange?: (name: string, value: string) => void;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	translator?: Function;
	checkIfTranslateExist?: Function;
}

class Gender extends React.PureComponent<GenderProps> {
	render() {
		const name = this.props.name || 'gender';
		let errorMessage;
		let valid;
		let options = [
			{ label: this.props.translator(`gender.male`), id: 'male' },
			{ label: this.props.translator(`gender.female`), id: 'female' }
		];
		if (this.props.validationStates) {
			if (this.props.validationStates[name]) {
				errorMessage = this.props.validationStates[name].errorMessage;
				valid = this.props.validationStates[name].state;
			}
		}
		return React.cloneElement(this.props.radioButtons || <FlatRadioButton />, {
			automationName: this.props.automationName || this.props.name,
			label: this.props.translator(`${this.props.name}.label`),
			onChange: this.props.onChange,
			name,
			valid,
			errorMessage,
			validationRules: this.props.validationRules || [{ name: 'required' }],
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: this.props.value,
			required: this.props.required,
			options,
			selectedRadio: this.props.value || this.props.defaultOption,
			translator: this.props.translator
		});
	}
}

export default Gender;