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

import IDUtil from "../../util/IDUtil";
import ComponentUtil from "../../util/ComponentUtil";

class CollectionBar extends React.PureComponent {

	constructor(props) {
		super(props);
		this.CLASS_PREFIX = "scb";
	}

	getCollectionHits = config => {
		if (config && config.getCollectionMetadata()) {
			const md = config.getCollectionMetadata();
			const docType = config.getDocumentType();
			if (md && md.collection_statistics) {
				if (md.collection_statistics.length > 0) {
					const match = md.collection_statistics.find(dt => dt.doc_type === docType);
					return match ? match.doc_count : 0;
				}
			}
		}
		return 0;
	};

	resetSearch = () => {
		this.props.resetSearch(this.constructor.name, null);
	};

	render() {
		const collectionConfig = this.props.collectionConfig;
		const collectionMetadata = collectionConfig ? collectionConfig.getCollectionMetadata() : null;

		const collectionButton = !collectionConfig ? (
			<button
				className="btn btn-primary"
				onClick={this.props.selectCollection}
			>
				{collectionConfig ? "Change collection" : "Select collection"}
			</button>
		) : null;

		const infoButton =
			collectionMetadata && collectionMetadata.registryUrl ? (
				<a
					className={IDUtil.cssClassName("link", this.CLASS_PREFIX)}
					title="View collection info"
					href={collectionMetadata.registryUrl}
					target="_blank"
				/>
			) : null;

		const title = collectionConfig ? (
				<h2 onClick={this.props.selectCollection}>{collectionConfig.getCollectionTitle()}</h2>
			) : null;

		const hits = collectionConfig ? (
			<span
				className={IDUtil.cssClassName("count", this.CLASS_PREFIX)}
				title="Records in this collection"
			>
				{ComponentUtil.formatNumber(
					this.getCollectionHits(collectionConfig)
				)}
			</span>
		) : null;


		const resetButton = collectionConfig ? (
			<button
				className="btn btn-default"
				onClick={this.resetSearch}
			>
				Clear search
			</button>
		) : null;
		const saveButton = collectionConfig ? (
			<button
				className="btn btn-secondary"
				onClick={this.props.saveQuery}
				title="Save current query to the active project"
			>
				Save Query
			</button>
		) : null;

		return (
			<div
				className={IDUtil.cssClassName("single-search-collection-bar")}
			>
				{collectionConfig ? (
                    /* Collection info + buttons */
                    <div
                        className={IDUtil.cssClassName(
                            "active",
                            this.CLASS_PREFIX
                        )}
                    >
                        {/* Collection info */}
                        <div className={IDUtil.cssClassName(
                            "collection-info",
                            this.CLASS_PREFIX
                        )}
                        >
                            {title}
                            {hits}
                            {infoButton}
                        </div>

                        {/* Buttons */}
                        <div className={IDUtil.cssClassName(
                            "buttons",
                            this.CLASS_PREFIX
                        )}>
                            {saveButton}
                            {resetButton}
                        </div>
                    </div>
                ):  (
					/* Select a collection */
					<div>
						{collectionButton}
					</div>
				)}
			</div>
		);
	}
}

CollectionBar.propTypes = {
	collectionConfig: PropTypes.shape({
		// optional: collection config of active project
		getCollectionTitle: PropTypes.func.isRequired
	}),
	selectCollection: PropTypes.func.isRequired, // show modal to select collection
	resetSearch: PropTypes.func.isRequired, // reset search
	saveQuery: PropTypes.func, // save query, optional (only when project is selected)
};

export default CollectionBar;
