import React, { Component } from "react";
import { Text } from "@plusscommunities/pluss-core-app/components";
import {
	View,
	Dimensions,
	Modal,
	ScrollView,
	TouchableWithoutFeedback,
	Platform,
} from "react-native";
import { connect } from "react-redux";
import {
	TEXT_DARK,
	LINEGREY,
	getMainBrandingColourFromState,
} from "../colours";
import UserListing from "./UserListing";
import { InlineButton } from "./InlineButton";

const SCREEN_HEIGHT = Dimensions.get("window").height;

class UserListPopup extends Component {
	getRenderKey(user, userKey) {
		if (user.id) {
			return `${user.id}${userKey}`;
		}
		if (user.userId) {
			return `${user.userId}${userKey}`;
		}
		return userKey;
	}

	renderHeader() {
		return (
			<View style={styles.titleContainer}>
				<View style={styles.titleContent}>
					<Text style={styles.title}>{this.props.title}</Text>
				</View>
			</View>
		);
	}

	renderScrollContainer() {
		return (
			<ScrollView
				style={styles.optionsContainer}
				keyboardShouldPersistTaps="handled"
			>
				{this.props.users.map((user, userIndex) => {
					return (
						<UserListing
							user={user}
							key={this.getRenderKey(user, userIndex)}
							index={userIndex}
						/>
					);
				})}
				<View style={styles.scrollFooterSpace} />
			</ScrollView>
		);
	}

	renderFooter() {
		return (
			<View style={styles.footer}>
				<InlineButton
					onPress={this.props.onClose.bind(this)}
					color={this.props.colourBrandingMain}
					style={[styles.footerButton]}
				>
					Done
				</InlineButton>
			</View>
		);
	}

	render() {
		return (
			<Modal
				visible={this.props.visible}
				transparent
				animationType="slide"
				onRequestClose={this.props.onClose}
			>
				<ScrollView keyboardShouldPersistTaps="always">
					<View style={styles.popup}>
						<TouchableWithoutFeedback onPress={this.props.onClose}>
							<View style={styles.popupOverlay} />
						</TouchableWithoutFeedback>
						<View
							style={[
								styles.popupContent,
								{
									minHeight:
										SCREEN_HEIGHT - (Platform.OS === "android" ? 175 : 150),
								},
								{
									marginTop: 60,
									minHeight:
										SCREEN_HEIGHT - (Platform.OS === "android" ? 85 : 60),
								},
							]}
						>
							{this.renderHeader()}
							{this.renderScrollContainer()}
							{this.renderFooter()}
						</View>
					</View>
				</ScrollView>
			</Modal>
		);
	}
}

const styles = {
	popup: {
		flex: 1,
		justifyContent: "center",
	},
	popupOverlay: {
		position: "absolute",
		backgroundColor: "rgba(19, 19, 26, .25)",
		top: 0,
		left: 0,
		right: 0,
		bottom: 0,
	},
	popupContent: {
		borderRadius: 3,
		marginTop: 150,
		backgroundColor: "#fff",
		flex: 1,
		borderTopLeftRadius: 15,
		borderTopRightRadius: 15,
	},
	footer: {
		padding: 8,
		borderTopWidth: 1,
		borderColor: LINEGREY,
		backgroundColor: "#fff",
	},
	footerButton: {
		width: "100%",
		height: 40,
	},
	titleContainer: {
		alignSelf: "stretch",
		padding: 24,
		paddingTop: 16,
		paddingBottom: 0,
	},
	titleContent: {
		borderColor: LINEGREY,
		borderBottomWidth: 1,
		flexDirection: "row",
		justifyContent: "space-between",
		paddingBottom: 15,
	},
	title: {
		fontSize: 15,
		fontFamily: "sf-semibold",
		color: TEXT_DARK,
	},
	optionsContainer: {
		flex: 1,
		paddingVertical: 8,
	},
};

const mapStateToProps = (state) => {
	return {
		colourBrandingMain: getMainBrandingColourFromState(state),
	};
};

const userListPopup = connect(mapStateToProps, {})(UserListPopup);
export { userListPopup as UserListPopup };
