/*!
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */
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';

const GeneralSection = ({onDataChanged, displayName, vfcCode, nfcFunction, description, isReadOnlyMode, genericFieldInfo, isManual}) => (
	<GridSection title={i18n('General')}>
		{/* disabled until backend will be ready to implement it
			<div className='validation-input-wrapper'>
			<div className='form-group'>
			<label className='control-label'>{i18n('Name')}</label>
			<div>{name}</div>
			</div>
			</div>

		*/}
		<GridItem>
			<Input
				data-test-id='name'
				label={i18n('Name')}
				value={displayName}
				disabled={!isManual || isReadOnlyMode}
				type='text'/>
			{!isManual  && <Input
				data-test-id='vfcCode'
				label={i18n('Naming Code')}
				value={vfcCode}
				isValid={genericFieldInfo.vfcCode.isValid}
				errorText={genericFieldInfo.vfcCode.errorText}
				onChange={vfcCode => onDataChanged({vfcCode})}
				disabled={isReadOnlyMode}
				type='text'/> }
			<Input
				data-test-id='nfcFunction'
				label={i18n('Function')}
				value={nfcFunction}
				isValid={genericFieldInfo.nfcFunction.isValid}
				errorText={genericFieldInfo.nfcFunction.errorText}
				onChange={nfcFunction => onDataChanged({nfcFunction})}
				disabled={isReadOnlyMode}
				type='text'/>
		</GridItem>
		<GridItem colSpan={2}>
			<Input
				label={i18n('Description')}
				isValid={genericFieldInfo.description.isValid}
				errorText={genericFieldInfo.description.errorText}
				onChange={description => onDataChanged({description})}
				disabled={isReadOnlyMode}
				value={description}
				groupClassName='multi-line-textarea'
				data-test-id='description'
				type='textarea'/>
		</GridItem>
		<GridItem />
	</GridSection>
);

const HypervisorSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
	<GridSection title={i18n('Hypervisor')}>
		<GridItem>
			<Input
				data-test-id='hypervisor'
				label={i18n('Supported Hypervisors')}
				type='select'
				className='input-options-select'
				groupClassName='bootstrap-input-options'
				isValid={qgenericFieldInfo['general/hypervisor/hypervisor'].isValid}
				errorText={qgenericFieldInfo['general/hypervisor/hypervisor'].errorText}
				value={dataMap['general/hypervisor/hypervisor']}
				onChange={(e) => {
					const selectedIndex = e.target.selectedIndex;
					const val = e.target.options[selectedIndex].value;
					onQDataChanged({'general/hypervisor/hypervisor' : val});}
				}>
				<option key='placeholder' value=''>{i18n('Select...')}</option>
				{qgenericFieldInfo['general/hypervisor/hypervisor'].enum.map(hv => <option value={hv.enum} key={hv.enum}>{hv.title}</option>)}
			</Input>
		</GridItem>
		<GridItem colSpan={2}>
			<Input
				data-test-id='drivers'
				onChange={(driver) => onQDataChanged({'general/hypervisor/drivers' : driver})}
				label={i18n('Hypervisor Drivers')}
				type='text'
				isValid={qgenericFieldInfo['general/hypervisor/drivers'].isValid}
				errorText={qgenericFieldInfo['general/hypervisor/drivers'].errorText}
				value={dataMap['general/hypervisor/drivers']}/>
		</GridItem>
		<GridItem colSpan={3}>
			<Input
				data-test-id='containerFeaturesDescription'
				label={i18n('Describe Container Features')}
				type='textarea'
				onChange={(containerFeaturesDescription) => onQDataChanged({'general/hypervisor/containerFeaturesDescription' : containerFeaturesDescription})}
				isValid={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].isValid}
				errorText={qgenericFieldInfo['general/hypervisor/containerFeaturesDescription'].errorText}
				value={dataMap['general/hypervisor/containerFeaturesDescription']}/>
		</GridItem>
	</GridSection>
);

const ImageSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
	<GridSection title={i18n('Disk')}>
		<GridItem>
			<Input
				data-test-id='bootDiskSizePerVM'
				onChange={(bootDiskSizePerVM) => onQDataChanged({'general/disk/bootDiskSizePerVM' : bootDiskSizePerVM})}
				label={i18n('Size of boot disk per VM (GB)')}
				type='number'
				isValid={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].isValid}
				errorText={qgenericFieldInfo['general/disk/bootDiskSizePerVM'].errorText}
				value={dataMap['general/disk/bootDiskSizePerVM']}/>
		</GridItem>
		<GridItem>
			<Input
				data-test-id='ephemeralDiskSizePerVM'
				onChange={(ephemeralDiskSizePerVM) => onQDataChanged({'general/disk/ephemeralDiskSizePerVM' : ephemeralDiskSizePerVM})}
				label={i18n('Size of ephemeral disk per VM (GB)')}
				type='number'
				isValid={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].isValid}
				errorText={qgenericFieldInfo['general/disk/ephemeralDiskSizePerVM'].errorText}
				value={dataMap['general/disk/ephemeralDiskSizePerVM']}/>
		</GridItem>
	</GridSection>
);

const RecoverySection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
	<GridSection title={i18n('Recovery')}>
		<GridItem>
			<Input
				data-test-id='pointObjective'
				label={i18n('VM Recovery Point Objective (Minutes)')}
				type='number'
				onChange={(pointObjective) => onQDataChanged({'general/recovery/pointObjective' : pointObjective})}
				isValid={qgenericFieldInfo['general/recovery/pointObjective'].isValid}
				errorText={qgenericFieldInfo['general/recovery/pointObjective'].errorText}
				value={dataMap['general/recovery/pointObjective']}/>
		</GridItem>
		<GridItem>
			<Input
				data-test-id='timeObjective'
				label={i18n('VM Recovery Time Objective (Minutes)')}
				type='number'
				onChange={(timeObjective) => onQDataChanged({'general/recovery/timeObjective' : timeObjective})}
				isValid={qgenericFieldInfo['general/recovery/timeObjective'].isValid}
				errorText={qgenericFieldInfo['general/recovery/timeObjective'].errorText}
				value={dataMap['general/recovery/timeObjective']}/>
			<div className='empty-two-col' />
		</GridItem>
		<GridItem colSpan={2} />
		<GridItem colSpan={2}>
			<Input
				data-test-id='vmProcessFailuresHandling'
				className='textarea'
				label={i18n('How are in VM process failures handled?')}
				type='textarea'
				onChange={(vmProcessFailuresHandling) => onQDataChanged({'general/recovery/vmProcessFailuresHandling' : vmProcessFailuresHandling})}
				isValid={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].isValid}
				errorText={qgenericFieldInfo['general/recovery/vmProcessFailuresHandling'].errorText}
				value={dataMap['general/recovery/vmProcessFailuresHandling']}/>
			<div className='empty-two-col' />

		</GridItem>
		{
			/** disabled until backend will be ready to implement it
			<div className='row'>
			<div className='col-md-3'>
			<Input
			label={i18n('VM Recovery Document')}
			type='text'
			pointer='/general/recovery/VMRecoveryDocument'/>
			</div>
			</div>
			*/
		}
	</GridSection>
);

const DNSConfigurationSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
	<GridSection title={i18n('DNS Configuration')}>
		<GridItem colSpan={2}>
			<Input
				data-test-id='dnsConfiguration'
				label={i18n('Do you have a need for DNS as a Service? Please describe.')}
				type='textarea'
				onChange={(dnsConfiguration) => onQDataChanged({'general/dnsConfiguration' : dnsConfiguration})}
				isValid={qgenericFieldInfo['general/dnsConfiguration'].isValid}
				errorText={qgenericFieldInfo['general/dnsConfiguration'].errorText}
				value={dataMap['general/dnsConfiguration']}/>
		</GridItem>
	</GridSection>
);

const CloneSection = ({dataMap, onQDataChanged, qgenericFieldInfo}) => (
	<GridSection title={i18n('Clone')}>
		<GridItem colSpan={2}>
			<Input
				data-test-id='vmCloneUsage'
				label={i18n('Describe VM Clone Use')}
				type='textarea'
				onChange={(vmCloneUsage) => onQDataChanged({'general/vmCloneUsage' : vmCloneUsage})}
				isValid={qgenericFieldInfo['general/vmCloneUsage'].isValid}
				errorText={qgenericFieldInfo['general/vmCloneUsage'].errorText}
				value={dataMap['general/vmCloneUsage']}/>
		</GridItem>
	</GridSection>
);

class SoftwareProductComponentsGeneralView extends React.Component {

	render() {
		let {isManual, onQDataChanged, onDataChanged, genericFieldInfo, dataMap, qGenericFieldInfo, componentData: {displayName, vfcCode, nfcFunction, description}, isReadOnlyMode} =  this.props;
		return(
			<div className='vsp-components-general'>
				<div className='general-data'>
					{genericFieldInfo && qGenericFieldInfo && <Form
						isValid={this.props.isFormValid}
						formReady={null}
						isReadOnlyMode={isReadOnlyMode}
						onValidityChanged={(isValidityData) => this.props.onValidityChanged(isValidityData)}
						hasButtons={false}>
						<GeneralSection
							onDataChanged={onDataChanged}
							displayName={displayName}
							vfcCode={vfcCode}
							nfcFunction={nfcFunction}
							description={description}
							isManual={isManual}
							isReadOnlyMode={isReadOnlyMode}
							genericFieldInfo={genericFieldInfo}/>
						<HypervisorSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
						<ImageSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
						<RecoverySection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
						<DNSConfigurationSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
						<CloneSection  onQDataChanged={onQDataChanged} dataMap={dataMap} qgenericFieldInfo={qGenericFieldInfo}/>
					</Form> }
				</div>
			</div>
		);
	}

	save() {
		let {onSubmit, componentData, qdata} = this.props;
		return onSubmit({componentData, qdata});
	}
}

export default SoftwareProductComponentsGeneralView;