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

export type AppType = {
	iconUrl: string,
	name: string,
	slug: string,
	link: string,
};

// get the locally stored image
class SuccessComponent extends React.PureComponent<{ appsList: AppType[] }, { size: number }> {
	constructor(props: { appsList: any[] }) {
		super(props);
		this.state = {
			size: 160
		};
	}
	render() {
		const { appsList } = this.props;
		const onLayout: any = (all: any) => {
			this.setState({ size: all.nativeEvent.layout.width });
		};
		return (
			<BlueRainConsumer>
				{(BR: BlueRain) => (
					<BR.Components.View style={style.container} /* widths={{ xl: 1024, lg: 680, md: 510, sm: 510, xs: 510 }} */>
						<BR.Components.Row>
							{
								appsList.map((app) =>
									<BR.Components.Column
										key={app.slug}
										xl={2}
										lg={3}
										md={4}
										sm={4}
										xs={4}
									>
										<BR.Components.View onLayout={onLayout}>
											<AppCard size={this.state.size} {...app} />
										</BR.Components.View>
									</BR.Components.Column>
								)
							}
						</BR.Components.Row>
					</BR.Components.View>
				)}
			</BlueRainConsumer>
		);
	}
}

export default SuccessComponent;