import React, { PureComponent } from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import { TEXT_BLUEGREY } from "../colours";

class LoadingStateWidget extends PureComponent {
	renderPlaceHolder(opacity = 1) {
		return (
			<View
				style={[styles.item, { opacity, height: this.props.height - 20 }]}
			/>
		);
	}

	render() {
		return (
			<View
				style={[
					styles.container,
					this.props.height && { height: this.props.height },
					this.props.style,
				]}
			>
				<ScrollView horizontal style={styles.itemContainer}>
					{this.renderPlaceHolder(0.8)}
					{this.renderPlaceHolder(0.6)}
					{this.renderPlaceHolder(0.4)}
					{this.renderPlaceHolder(0.2)}
				</ScrollView>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		borderRadius: 5,
		paddingVertical: 5,
	},
	titleText: {
		fontFamily: "qs-bold",
		fontSize: 16,
		color: TEXT_BLUEGREY,
	},
	itemContainer: {
		marginTop: 20,
	},
	item: {
		borderRadius: 4,
		width: 97,
		height: 98,
		backgroundColor: "#e6ebef",
		marginRight: 16,
	},
});

export default LoadingStateWidget;
