import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { SVGIcon } from 'ca-ui-toolkit';
import ReactHtmlParser from 'react-html-parser';
import './QuickLaunch.scss';
import { QuickLaunchTarget } from '../QuickLaunchTarget/QuickLaunchTarget';

export class QuickLaunch extends Component{
	static propTypes = {
		/** Custom class name(s) */
		className: PropTypes.string,
		/** Show the quick launch options if set to true */
		showQuickLaunch: PropTypes.bool,
		/** A copy of the i18n object for translating strings */
		stringGetter: PropTypes.object,
		/** A name showing what folder to upload the file to */
		folderName: PropTypes.string,
		/** A list of the possible items that the uploaded file can become */
		quickLaunchCollectionId: PropTypes.string,
		/** A reference to the ES5 homeView object */
		homeView: PropTypes.object,
		/** A copy of the glass context */
		glassContext: PropTypes.object,
		/** Hides the quick launch when called */
		hideQuickLaunch: PropTypes.func,
		/** Specifies if a jupyter server is configured */
		jupyterEnabled: PropTypes.string
	};

	constructor(props) {
		super(props);

		this.state = {
			uploadText: this.props.stringGetter.get('uploadToFolder', { folderName: props.folderName || props.stringGetter.get('myContent'), launchAction: '' }),
			quickLaunchItems: []
		};

		/**
		*	Retrieve the possible quick launch items from glass to be displayed in the quick launch
		*/
		if (props.glassContext) {
			props.glassContext.appController.findCollection(props.quickLaunchCollectionId)
				.then(function (itemCollection) {
					// check if the jupyter server has been configured, otherwise disable the jupyter notebook quicklaunch tile
					// jupyter is not configured if the config is an empty string
					if (props.jupyterEnabled === ''){
						itemCollection = itemCollection.filter((item) => {
							return item.targetId !== 'jupyterNotebook';
						});
					}
					this.setState({ quickLaunchItems: itemCollection || [] });
				}.bind(this));
		}
	}

	setUploadBannerText(launchAction) {
		const { stringGetter, folderName } = this.props;
		const msgKey = (launchAction) ? 'uploadAndLaunch' : 'uploadToFolder';
		const message = stringGetter.get(msgKey, {
			folderName: folderName || stringGetter.get('myContent'),
			launchAction: launchAction || ''
		});

		this.setState({ uploadText: message });
	}

	render() {
		const { showQuickLaunch, stringGetter, glassContext, homeView, hideQuickLaunch } = this.props;
		const { quickLaunchItems } = this.state;

		const quickLaunchTargets = quickLaunchItems.map((item, i) => {
			return <QuickLaunchTarget
				key={ i }
				content={ item }
				glassContext={ glassContext }
				setUploadText={ this.setUploadBannerText.bind(this) }
				homeView={homeView}
				hideQuickLaunch={ hideQuickLaunch }>
			</QuickLaunchTarget>;
		});

		if (showQuickLaunch) {
			return (
				<div className="quickLaunchContainer">
					<div className="uploadBanner">
						<SVGIcon className="uploadBannerIcon" iconId="upload_16"></SVGIcon>
						<span id="uploadBannerText" className="uploadBannerText">{ ReactHtmlParser(this.state.uploadText) }</span>
					</div>
					<div className="quickLaunchBanner">
						<div className="quickLaunchContent">
							<div className="quickLaunchText">
								<div className="quickLaunchTitle">
									{ stringGetter.get('quickLaunch') }
								</div>
								<div className="quickLaunchDescription">
									{ ReactHtmlParser(stringGetter.get('uploadAndLaunch', {
										folderName: this.props.folderName || stringGetter.get('myContent'),
										launchAction: ''
									})) }
								</div>
							</div>
							<div className="quickLaunchTargets">
								{ quickLaunchTargets }
							</div>
						</div>
					</div>
				</div>
			);
		} else {
			return (
				<div></div>
			);
		}
	}
}