import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
import Form from 'nfvo-components/input/validation/Form.jsx';
import GridSection from 'nfvo-components/grid/GridSection.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
import SelectInput from 'nfvo-components/input/SelectInput.jsx';
import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx';
import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx';
import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx';
import Validator from 'nfvo-utils/Validator.js';

export default class SoftwareProductDeploymentEditorView extends React.Component {
	render() {
		let {data, isEdit, onClose, onDataChanged, isReadOnlyMode, selectedFeatureGroupsList, componentsList, computesList, genericFieldInfo} = this.props;
		let {model, description, featureGroupId, componentComputeAssociations = []} = data;
		let featureGroupsExist = selectedFeatureGroupsList.length > 0;
		return (
			<div>
				{genericFieldInfo && <Form
					ref='validationForm'
					hasButtons={true}
					labledButtons={true}
					isReadOnlyMode={isReadOnlyMode}
					onSubmit={ () => this.submit() }
					submitButtonText={isEdit ? i18n('Save') : i18n('Create')}
					onReset={ () => onClose() }
					onValidateForm={() => this.validate() }
					isValid={this.props.isFormValid}
					formReady={this.props.formReady}
					className='vsp-deployment-editor'>
					<GridSection>
						<GridItem colSpan={1}>
							<Input
								onChange={model => onDataChanged({model}, {model: model => this.validateName(model)})}
								label={i18n('Model')}
								value={model}
								data-test-id='deployment-model'
								isValid={genericFieldInfo.model.isValid}
								errorText={genericFieldInfo.model.errorText}
								isRequired={true}
								type='text'/>
						</GridItem>
						<GridItem colSpan={3}>
							<Input
								onChange={description => onDataChanged({description})}
								label={i18n('Description')}
								value={description}
								data-test-id='deployment-description'
								isValid={genericFieldInfo.description.isValid}
								errorText={genericFieldInfo.description.errorText}
								type='text'/>
						</GridItem>
					</GridSection>
					<GridSection className={`deployment-feature-groups-section${!featureGroupsExist ? ' no-feature-groups' : ''}`} title={i18n('License Details')}>
						<GridItem colSpan={1}>
							<SelectInput
								data-test-id='deployment-feature-groups'
								label={i18n('Feature Group')}
								value={featureGroupId}
								onChange={featureGroup => onDataChanged({featureGroupId: featureGroup ? featureGroup.value : null})}
								type='select'
								clearable={true}
								disabled={isReadOnlyMode || !featureGroupsExist}
								className='field-section'
								options={selectedFeatureGroupsList}/>
						</GridItem>
					</GridSection>
					{!featureGroupsExist && <GridSection className='deployment-feature-group-warning-section'>
						<GridItem colSpan={3}>
							<span>{i18n('Please assign Feature Groups in VSP General')}</span>
						</GridItem>
					</GridSection>}
					<GridSection title={i18n('Assign VFCs and Compute Flavors')} className='vfc-table'>
						<GridItem colSpan={4}>
							<SelectActionTable
								columns={['Virtual Function Components', 'Compute Flavors']}
								numOfIcons={0}>
								{componentComputeAssociations.map( (association, index) =>
									<SelectActionTableRow key={association.componentId}>
										<SelectActionTableCell
											options={
												componentsList
												.map(component => ({value: component.id, label: component.displayName}) )
											}
											selected={association.componentId}
											onChange={componentId => {
												let newAssociations = [...componentComputeAssociations];
												newAssociations[index] = {...newAssociations[index], componentId};
												onDataChanged({componentComputeAssociations: newAssociations});
											}}
											disabled={true}/>
										<SelectActionTableCell
											options={
												computesList
												.filter(compute => compute.componentId === association.componentId)
												.map(compute => ({value: compute.computeFlavorId, label: compute.name}) )
											}
											selected={association.computeFlavorId}
											onChange={computeFlavorId => {
												let newAssociations = [...componentComputeAssociations];
												newAssociations[index] = {...newAssociations[index], computeFlavorId};
												onDataChanged({componentComputeAssociations: newAssociations});
											}}
											disabled={isReadOnlyMode}/>
									</SelectActionTableRow>
								)}
							</SelectActionTable>
						</GridItem>
					</GridSection>
				</Form>}
			</div>
		);
	}

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

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

	submit(){
		let {isEdit, onCreate, onEdit, onClose, data} = this.props;
		if (isEdit) {
			onEdit(data);
		} else {
			onCreate(data);
		}
		onClose();
	}

	validate() {
		this.props.onValidateForm();
	}
}