import * as React from 'react';
import { BlueRain, BlueRainConsumer } from '@blueeast/bluerain-os';
import { style } from './style';
import getAppList from '../../helpers/getAppList';

export interface AppCardProperties {
	name: string,
	link: string,
	slug?: string,
	size: number,
}

class AppCard extends React.PureComponent<AppCardProperties, {}>{

	render() {
		const { name, link, size, slug } = this.props;

		return (
			<BlueRainConsumer>
				{(BR: BlueRain) => {
					const appsList = getAppList(BR);
					// check if the app exists
					let appFound = false;
					appsList.forEach((each) => {
						if (each.slug === slug) {
							appFound = true;
						}
					});
					return (
						<BR.Components.Link
							to={link}
							style={style.link}
						>
							<BR.Components.View>
								{slug && appFound ? BR.Apps.getIconElement(slug, { size }) : null}
								<BR.Components.Text
									style={{ width: size, ...style.appNameStyle }}
								>
									{name}
								</BR.Components.Text>
							</BR.Components.View>
						</BR.Components.Link>
					);
				}}
			</BlueRainConsumer>
		);
	}
}

export default AppCard;