import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Form from 'nfvo-components/input/validation/Form.jsx';
import Input from 'nfvo-components/input/validation/Input.jsx';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
import {LIMITS_FORM_NAME, selectValues} from './LimitEditorConstants.js';
import Button from 'sdc-ui/lib/react/Button.js';
import Validator from 'nfvo-utils/Validator.js';

const LimitPropType = React.PropTypes.shape({
	id: React.PropTypes.string,
	name: React.PropTypes.string,
	description: React.PropTypes.string,
	metric: React.PropTypes.string,
	value: React.PropTypes.number,
	aggregationFunction: React.PropTypes.string,
	time: React.PropTypes.string,
	unit: React.PropTypes.number
});

class LimitEditor extends React.Component {
	static propTypes = {
		data: LimitPropType,
		limitsNames: React.PropTypes.object,
		isReadOnlyMode: React.PropTypes.bool,
		isFormValid: React.PropTypes.bool,
		formReady: React.PropTypes.bool,
		genericFieldInfo: React.PropTypes.object.isRequired,
		onDataChanged: React.PropTypes.func.isRequired,
		onSubmit: React.PropTypes.func.isRequired,
		onValidateForm: React.PropTypes.func.isRequired,
		onCancel: React.PropTypes.func.isRequired
	};

	componentDidUpdate(prevProps) {				
		if (this.props.formReady && this.props.formReady !== prevProps.formReady) { 
			this.submit();
		}
	}

	render() {
		let {data = {}, onDataChanged, isReadOnlyMode, genericFieldInfo, onCancel, isFormValid, formReady, onValidateForm} = this.props;
		let {name, description, metric, value, aggregationFunction, time, unit} = data;
		return (
			<div className='limit-editor'>
			{!data.id && 
			<div className='limit-editor-title'>
				{data.name ? data.name : i18n('NEW LIMIT')}
			</div>}
			{
				genericFieldInfo && 
				<Form
					ref='validationForm'
					hasButtons={false}				
					isValid={isFormValid}
					formReady={formReady}
					onValidateForm={() => onValidateForm(LIMITS_FORM_NAME) }
					labledButtons={false}
					isReadOnlyMode={isReadOnlyMode}
					className='limit-editor-form'>					
					<GridSection className='limit-editor-form-grid-section'>
						<GridItem colSpan={2}>
							<Input
								onChange={name => onDataChanged({name}, LIMITS_FORM_NAME, {name: () => this.validateName(name)})}
								label={i18n('Name')}
								data-test-id='limit-editor-name'
								value={name}
								isValid={genericFieldInfo.name.isValid}
								errorText={genericFieldInfo.name.errorText}
								isRequired={true}
								type='text'/>
						</GridItem>
						<GridItem colSpan={2}>
							<Input
								onChange={description => onDataChanged({description}, LIMITS_FORM_NAME)}
								label={i18n('Description')}
								data-test-id='limit-editor-description'
								value={description}
								isValid={genericFieldInfo.description.isValid}
								errorText={genericFieldInfo.description.errorText}
								isRequired={false}
								type='text'/>
						</GridItem>
						<GridItem colSpan={2}>
							<Input
								onChange={e => {									
									const selectedIndex = e.target.selectedIndex;
									const val = e.target.options[selectedIndex].value;
									onDataChanged({metric: val}, LIMITS_FORM_NAME);}
								}
								isRequired={true}
								value={metric}
								label={i18n('Metric')}
								data-test-id='limit-editor-metric'
								isValid={genericFieldInfo.metric.isValid}
								errorText={genericFieldInfo.metric.errorText}
								groupClassName='bootstrap-input-options'
								className='input-options-select'
								type='select' >
								{selectValues.METRIC.map(mtype =>
									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
							</Input>
						</GridItem>
						<GridItem>
							<Input
								onChange={value => onDataChanged({value}, LIMITS_FORM_NAME)}
								label={i18n('Metric value')}
								data-test-id='limit-editor-metric-value'
								value={value}
								isValid={genericFieldInfo.value.isValid}
								errorText={genericFieldInfo.value.errorText}
								isRequired={true}
								type='number'/>
						</GridItem>
						<GridItem>
							<Input
								onChange={unit => onDataChanged({unit}, LIMITS_FORM_NAME)}
								label={i18n('Units')}
								data-test-id='limit-editor-units'
								value={unit}
								isValid={genericFieldInfo.unit.isValid}
								errorText={genericFieldInfo.unit.errorText}
								isRequired={false}
								type='number'/>
						</GridItem>
						<GridItem colSpan={2}>
							<Input
								onChange={e => {									
									const selectedIndex = e.target.selectedIndex;
									const val = e.target.options[selectedIndex].value;
									onDataChanged({aggregationFunction: val}, LIMITS_FORM_NAME);}
								}
								value={aggregationFunction}
								label={i18n('Aggregation Function')}
								data-test-id='limit-editor-aggregation-function'
								isValid={genericFieldInfo.aggregationFunction.isValid}
								errorText={genericFieldInfo.aggregationFunction.errorText}
								groupClassName='bootstrap-input-options'
								className='input-options-select'
								type='select' >
								{selectValues.AGGREGATION_FUNCTION.map(mtype =>
									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
							</Input>
						</GridItem>
						<GridItem>
							<Input
								onChange={e => {									
									const selectedIndex = e.target.selectedIndex;
									const val = e.target.options[selectedIndex].value;
									onDataChanged({time: val}, LIMITS_FORM_NAME);}
								}
								value={time}
								label={i18n('Time')}
								data-test-id='limit-editor-time'
								isValid={genericFieldInfo.time.isValid}
								errorText={genericFieldInfo.time.errorText}
								groupClassName='bootstrap-input-options'
								className='input-options-select'
								type='select' >
								{selectValues.TIME.map(mtype =>
									<option key={mtype.enum} value={mtype.enum}>{`${mtype.title}`}</option>)}
							</Input>							
						</GridItem>
					</GridSection>
					<GridSection className='limit-editor-buttons'>
						<Button btnType='outline'  disabled={!isFormValid} onClick={() => this.submit()} type='reset'>{i18n('Save')}</Button>	
						<Button btnType='outline' color='gray' onClick={onCancel} type='reset'>{i18n('Cancel')}</Button>
					</GridSection>						
				</Form>	
			}	
			</div>
		);
	}

	validateName(value) {
		const {data: {id}, limitsNames} = this.props;
		const isExists = Validator.isItemNameAlreadyExistsInList({itemId: id, itemName: value, list: limitsNames});

		return !isExists ?  {isValid: true, errorText: ''} :
		{isValid: false, errorText: i18n('Limit by the name \'' + value + '\' already exists. Limit name must be unique')};
	}

	submit() {
		if (!this.props.formReady) {
			this.props.onValidateForm(LIMITS_FORM_NAME);
		} else {
			this.props.onSubmit();
		}
	}
}

export default LimitEditor;