import React, { Component } from "react";
import { View, Image, TouchableOpacity } from "react-native";
import { Text } from "./Text";
import { connect } from "react-redux";
import _ from "lodash";
import { getReactions, getShadowStyle } from "../helper";
import { BG_GREY, TEXT_DARK, getMainBrandingColourFromState } from "../colours";
import { reactionActions } from "../apis";

class Reaction extends Component {
	onPressReaction = () => {
		if (!this.props.reactions[this.props.userId]) {
			reactionActions.add(
				this.props.entityId,
				this.props.entityType,
				this.props.reaction.key,
				this.props.site,
			);
			this.props.onLike();
		} else {
			reactionActions.remove(
				this.props.entityId,
				this.props.entityType,
				this.props.reaction.key,
			);
			this.props.onUnlike();
		}
	};

	getStyleType() {
		if (this.props.reactions[this.props.userId]) {
			return "ThisHL";
		}
		if (this.props.anyHighlighted) {
			return "OtherHL";
		}
		return "Default";
	}

	getTopReaction() {
		return _.maxBy(Object.keys(this.props.reactions), (key) => {
			return Object.keys(this.props.reactions[key]).length;
		});
	}

	getIcon(topReaction) {
		return _.find(getReactions(), (r) => {
			return r.key === topReaction;
		}).icon;
	}

	render() {
		if (this.props.topReactionOnly) {
			const topReaction = this.getTopReaction();
			if (!topReaction) {
				return null;
			}
			return (
				<View
					style={[styles.container, styles.containerThisHL, this.props.style]}
				>
					<Image
						style={[styles.image, this.props.imageStyle]}
						source={this.getIcon(topReaction)}
					/>
					<Text style={[styles.count, this.props.countStyle]}>
						{Object.keys(this.props.reactions[topReaction]).length}
					</Text>
				</View>
			);
		}
		return (
			<TouchableOpacity
				style={styles.touchable}
				onPress={this.onPressReaction}
				disabled={this.props.user.type === "KIOSK"}
			>
				<View
					style={[
						styles.container,
						styles[`container${this.getStyleType()}`],
						this.props.style,
					]}
				>
					<Image
						style={[styles.image, this.props.imageStyle]}
						source={this.props.reaction.icon}
					/>
					<Text
						style={[
							styles.count,
							this.getStyleType() === "ThisHL" && {
								color: this.props.colourBrandingMain,
							},
							this.props.countStyle,
						]}
					>
						{Object.keys(this.props.reactions).length}
					</Text>
				</View>
			</TouchableOpacity>
		);
	}
}

const styles = {
	touchable: {
		marginHorizontal: 4,
		width: 60,
		height: 30,
	},
	container: {
		width: 60,
		height: 30,
		borderRadius: 15,
		backgroundColor: BG_GREY,
		flexDirection: "row-reverse",
		alignItems: "center",
		paddingHorizontal: 8,
	},
	containerThisHL: {
		...getShadowStyle(),
	},
	containerOtherHL: {
		opacity: 0.5,
	},
	image: {
		width: 20,
		height: 20,
		resizeMode: "contain",
	},
	count: {
		fontFamily: "sf-medium",
		color: TEXT_DARK,
		flex: 1,
		textAlign: "center",
		fontSize: 16,
	},
};

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

const reaction = connect(mapStateToProps, {})(Reaction);
export { reaction as Reaction };
