import React from "react";
import PropTypes from 'prop-types';

import IDUtil from '../../util/IDUtil';
import ReadMoreLink from '../helpers/ReadMoreLink';

import { PowerSelect } from 'react-power-select';

class CollectionSelector extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			activeCollection: ''
		};
		this.CLASS_PREFIX = 'cls';
	}

    selectCollection = collectionId => {
        const __getCollectionConfig = collectionId => this.props.collectionList.filter(collection => collection.index === collectionId);
        if (collectionId) {
            this.setState({activeCollection: collectionId},
                () => this.onOutput(__getCollectionConfig(collectionId)[0])
            );
        }
    };

	/* ------------------------------------------------------------------------------
	------------------------------- COMMUNICATION WITH OWNER/RECIPE -----------------
	------------------------------------------------------------------------------- */

	onOutput = collectionMetadata => {
		if(this.props.onOutput) {
			if(collectionMetadata.index) {
				this.props.onOutput(this.constructor.name, collectionMetadata);
			} else {
				console.debug('No collection selected...');
			}
		}
	};

	render() {
		let markup;

		if(this.props.collectionList) {
			let collectionSelect = null;
			let collectionBrowser = null;

			//the collection selection part
			if(this.props.showSelect) {
		        const collectionOptionsArray = this.props.collectionList.map(collection => {
					return {
						"key": collection.index,
						"title": collection.title,
						"index": collection.index
					}
		        });

		        collectionSelect = (
					<form className="form-horizontal">
						<label className="col-sm-2">Collection</label>
						<div className="col-sm-10">
							<PowerSelect
								options={collectionOptionsArray}
								onChange={(e) => this.selectCollection(e)}
								optionLabelPath="title"
								placeholder="-- Select a collection -- "
							/>
						</div>
					</form>
		        );
			}

			if(this.props.showBrowser) {
				//the collections visualized as blocks
				const collectionBlocks = this.props.collectionList.map(collection => {
					let organisationImage = null;
                    let ckanLink = null;

                    if(collection.organization.image_url) {
						organisationImage = (<img src={collection.organization.image_url}  alt={collection.organization.title ? collection.organization.title : 'No title available'}/>)
					}
					if (collection.registryUrl) {
						ckanLink = (<ReadMoreLink linkUrl={collection.registryUrl}/>)
					}
					return (
					    <div className="bg__collection-wrapper" key={collection.index}>
                            <div className={IDUtil.cssClassName('collection', this.CLASS_PREFIX)}
                                 onClick={() => this.selectCollection(collection.index)}>
                                <div className={IDUtil.cssClassName('caption', this.CLASS_PREFIX)}>
                                    <h4>{collection.title}</h4>
                                    <p>{collection.organization.title}</p>
                                    {organisationImage}
                                </div>
                            </div>
                            {ckanLink}
                        </div>
					)
				});

				collectionBrowser = (
					<div className="collection-browser">
						{collectionBlocks}
					</div>
				)
			}

			markup =(
				<div className="row">
					<div className="col-md-12">
						{collectionSelect}
						{collectionBrowser}
					</div>
				</div>
			)
		} else {
			markup = (<h3>Loading collection list...</h3>)
		}

		//always return everything wrapped in an identifyable div
		return (
			<div className={IDUtil.cssClassName('collection-selector')}>
				{markup}
			</div>
		)
	}

}

CollectionSelector.propTypes = {
    onOutput: PropTypes.func.isRequired,
    showBrowser: PropTypes.bool,
    showSelect: PropTypes.bool,
    collectionList : PropTypes.array.isRequired
};

export default CollectionSelector;
