import React, { Component } from "react";
import { Text } from "@plusscommunities/pluss-core-app/components";
import {
	View,
	TouchableWithoutFeedback,
	TouchableOpacity,
	Modal,
} from "react-native";
import { connect } from "react-redux";
import _ from "lodash";
import {
	getMainBrandingColourFromState,
	LINEGREY,
	TEXT_DARK,
} from "../colours";

class PopupMenu extends Component {
	renderOption(item, index) {
		return (
			<TouchableOpacity key={index} onPress={item.onPress}>
				<View style={[styles.option, index === 0 && styles.firstOption]}>
					{_.isEmpty(item.text) && item.content ? (
						item.content
					) : (
						<Text style={styles.optionText}>{item.text}</Text>
					)}
				</View>
			</TouchableOpacity>
		);
	}

	renderOptions() {
		return (
			<View style={styles.optionsContainer}>
				{_.map(this.props.options, (item, index) => {
					return this.renderOption(item, index);
				})}
			</View>
		);
	}

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

	renderCancel() {
		return (
			<TouchableOpacity onPress={this.props.onClose}>
				<View style={[styles.option, styles.cancelOption]}>
					<Text
						style={[
							styles.optionText,
							styles.cancelText,
							{ color: this.props.colourBrandingMain },
						]}
					>
						{this.props.cancelText}
					</Text>
				</View>
			</TouchableOpacity>
		);
	}

	render() {
		return (
			<Modal
				visible
				transparent
				animationType="slide"
				onRequestClose={this.props.onClose}
			>
				<TouchableWithoutFeedback
					style={styles.container}
					onPress={this.props.onClose}
				>
					<View style={styles.container}>
						<View style={styles.menu}>
							{this.renderTitle()}
							{this.renderOptions()}
							{this.renderCancel()}
						</View>
					</View>
				</TouchableWithoutFeedback>
			</Modal>
		);
	}
}

const styles = {
	container: {
		position: "absolute",
		bottom: 0,
		left: 0,
		right: 0,
		top: 0,
		backgroundColor: "rgba(0,0,0,0.5)",
		zIndex: 1000,
	},
	menu: {
		position: "absolute",
		bottom: 0,
		left: 0,
		right: 0,
		backgroundColor: "#fff",
		borderTopLeftRadius: 12,
		borderTopRightRadius: 12,
	},
	optionsContainer: {
		paddingHorizontal: 16,
	},
	option: {
		paddingVertical: 16,
		borderColor: LINEGREY,
		borderTopWidth: 1,
	},
	cancelOption: {
		paddingHorizontal: 16,
	},
	firstOption: {
		borderTopWidth: 0,
	},
	optionText: {
		fontFamily: "sf-regular",
		fontSize: 16,
		textAlign: "center",
		color: TEXT_DARK,
	},
	cancelText: {
		fontFamily: "sf-medium",
	},
	titleContainer: {
		padding: 16,
		borderColor: LINEGREY,
		borderBottomWidth: 1,
	},
	titleText: {
		fontFamily: "sf-semibold",
		fontSize: 16,
		textAlign: "center",
		color: TEXT_DARK,
	},
};

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

const popupMenu = connect(mapStateToProps, {})(PopupMenu);
export { popupMenu as PopupMenu };
