import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Modal from 'nfvo-components/modal/Modal.jsx';
import objectValues from 'lodash/values.js';
import LicenseModelCreation from './licenseModel/creation/LicenseModelCreation.js';
import SoftwareProductCreation from './softwareProduct/creation/SoftwareProductCreation.js';
import VersionControllerUtils from 'nfvo-components/panel/versionController/VersionControllerUtils.js';
import classnames from 'classnames';
import ExpandableInput from 'nfvo-components/input/ExpandableInput.jsx';

export const catalogItemTypes = Object.freeze({
	LICENSE_MODEL: 'license-model',
	SOFTWARE_PRODUCT: 'software-product'
});

const catalogItemTypeClasses = {
	LICENSE_MODEL: 'license-model-type',
	SOFTWARE_PRODUCT: 'software-product-type'
};

class OnboardingCatalogView extends React.Component {

	constructor(props) {
		super(props);
		this.state = {searchValue: ''};
		this.handleSearch = this.handleSearch.bind(this);
	}

	handleSearch(event){
		this.setState({searchValue: event.target.value});
	}

	static propTypes = {
		licenseModelList: React.PropTypes.array,
		softwareProductList: React.PropTypes.array,
		modalToShow: React.PropTypes.oneOf(objectValues(catalogItemTypes)),
		onSelectLicenseModel: React.PropTypes.func.isRequired,
		onSelectSoftwareProduct: React.PropTypes.func.isRequired,
		onAddLicenseModelClick: React.PropTypes.func.isRequired,
		onAddSoftwareProductClick: React.PropTypes.func.isRequired
	};

	getModalDetails() {
		const {modalToShow} = this.props;
		switch (modalToShow) {
			case catalogItemTypes.LICENSE_MODEL:
				return {
					title: i18n('New License Model'),
					element: <LicenseModelCreation/>
				};
			case catalogItemTypes.SOFTWARE_PRODUCT:
				return {
					title: i18n('New Software Product'),
					element: <SoftwareProductCreation/>
				};
		}
	}

	render() {
		const modalDetails = this.getModalDetails();
		const {licenseModelList, softwareProductList, onSelectLicenseModel, onSelectSoftwareProduct, onAddLicenseModelClick, onAddSoftwareProductClick, modalToShow} = this.props;

		return (
			<div className='catalog-view'>
				<div className='catalog-header'>
					<div className='catalog-header-title'>{i18n('Onboarding Catalog')}</div>
					<ExpandableInput
						onChange={this.handleSearch}
						iconType='search'/>
				</div>
				<div className='catalog-list'>

					<div className='create-catalog-item tile'>
						<div className='plus-section'>
							<div className='plus-icon-button'/>
							<span>{i18n('ADD')}</span>
						</div>
						<div className='primary-btn new-license-model'>
							<span
								className='primary-btn-text'
								onClick={() => onAddLicenseModelClick()}>{i18n('New License Model')}</span></div>
						<div className='primary-btn'>
							<span
								className='primary-btn-text'
								onClick={() => onAddSoftwareProductClick()}>{i18n('New Vendor Software Product')}</span>
						</div>
					</div>
					{licenseModelList.filter(vlm => vlm.vendorName.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) > -1).map(licenseModel => this.renderTile(
						{
							...licenseModel,
							name: licenseModel.vendorName
						},
						catalogItemTypeClasses.LICENSE_MODEL,
						() => onSelectLicenseModel(licenseModel))
					)}
					{softwareProductList.filter(vsp => vsp.name.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) > -1).map(softwareProduct => this.renderTile(softwareProduct,
						catalogItemTypeClasses.SOFTWARE_PRODUCT,
						() => onSelectSoftwareProduct(softwareProduct))
					)}
				</div>
				<Modal
					show={Boolean(modalDetails)}
					className={`${this.getCatalogItemTypeClassByItemType(modalToShow)}-modal`}>
					<Modal.Header>
						<Modal.Title>{modalDetails && modalDetails.title}</Modal.Title>
					</Modal.Header>
					<Modal.Body>
						{
							modalDetails && modalDetails.element
						}
					</Modal.Body>
				</Modal>
			</div>
		);

	}

	getCatalogItemTypeClassByItemType(catalogItemType) {
		switch (catalogItemType) {
			case catalogItemTypes.LICENSE_MODEL:
				return catalogItemTypeClasses.LICENSE_MODEL;
			case catalogItemTypes.SOFTWARE_PRODUCT:
				return catalogItemTypeClasses.SOFTWARE_PRODUCT;
		}
	}

	renderTile(catalogItemData, catalogItemTypeClass, onSelect) {
		let {status: itemStatus} = VersionControllerUtils.getCheckOutStatusKindByUserID(catalogItemData.status, catalogItemData.lockingUser);
		return (
			<div className='catalog-tile tile' key={catalogItemData.id} onClick={() => onSelect()}>
				<div className={`catalog-tile-type ${catalogItemTypeClass}`}/>
				<div className='catalog-tile-icon'>
					<div className={`icon ${catalogItemTypeClass}-icon`}></div>
				</div>
				<div className='catalog-tile-content'>
					<div className='catalog-tile-item-details'>
						<div className='catalog-tile-item-name'>{catalogItemData.name}</div>
						<div className='catalog-tile-item-version'>V {catalogItemData.version}</div>
					</div>
					<div className={classnames('catalog-tile-check-in-status', {'sprite-new checkout-editable-status-icon': itemStatus === 'Locked'})}>
					</div>
				</div>
			</div>
		);
	}
}
export default OnboardingCatalogView;