import React from 'react';
import lbryio from 'lbryio.js';
import lbryuri from 'lbryuri';
import FileCard from 'component/fileCard';
import { BusyMessage } from 'component/common.js';
import ToolTip from 'component/tooltip.js';

const communityCategoryToolTipText =
	'Community Content is a public space where anyone can share content with the ' +
	'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
	'"five" to put your content here!';

const FeaturedCategory = props => {
	const { category, names } = props;

	return (
		<div className="card-row card-row--small">
			<h3 className="card-row__header">
				{category}
				{category &&
					category.match(/^community/i) &&
					<ToolTip
						label={__("What's this?")}
						body={__(communityCategoryToolTipText)}
						className="tooltip--header"
					/>}
			</h3>
			{names &&
				names.map(name =>
					<FileCard
						key={name}
						displayStyle="card"
						uri={lbryuri.normalize(name)}
					/>
				)}
		</div>
	);
};

class DiscoverPage extends React.Component {
	componentWillMount() {
		this.props.fetchFeaturedUris();
	}

	render() {
		const { featuredUris, fetchingFeaturedUris } = this.props;
		const failedToLoad =
			!fetchingFeaturedUris &&
			(featuredUris === undefined ||
				(featuredUris !== undefined && Object.keys(featuredUris).length === 0));

		return (
			<main>
				{fetchingFeaturedUris &&
					<BusyMessage message={__('Fetching content')} />}
				{typeof featuredUris === 'object' &&
					Object.keys(featuredUris).map(
						category =>
							featuredUris[category].length
								? <FeaturedCategory
										key={category}
										category={category}
										names={featuredUris[category]}
									/>
								: ''
					)}
				{failedToLoad &&
					<div className="empty">{__('Failed to load landing content.')}</div>}
			</main>
		);
	}
}

export default DiscoverPage;