import React, { Component } from "react";
import _ from "lodash";
import { TouchableOpacity } from "react-native";
import { Text } from "./Text";
import { Icon } from "@rneui/themed";
import { connect } from "react-redux";
import { TEXT_DARK, getMainBrandingColourFromState } from "../colours";

class DropDownItem extends Component {
	state = {};

	renderIcon() {
		if (!_.isUndefined(this.props.icon)) {
			return (
				<Icon
					name={this.props.icon}
					type="font-awesome"
					style={styles.dropDownItem_Icon}
					iconStyle={[
						styles.dropDownItem_IconStyle,
						{ fontSize: 16, color: this.props.colourBrandingMain },
					]}
				/>
			);
		}
		return null;
	}

	render() {
		return (
			<TouchableOpacity
				style={[
					styles.container,
					this.props.last && { marginBottom: 0 },
					this.props.style,
				]}
				onPress={this.props.onPress}
				activeOpacity={0.6}
			>
				{this.renderIcon()}
				<Text style={[styles.text, this.props.textStyle]}>
					{this.props.text}
				</Text>
			</TouchableOpacity>
		);
	}
}

const styles = {
	container: {
		flexDirection: "row",
		marginBottom: 12,
		minHeight: 18,
		width: "100%",
		position: "relative",
	},
	text: {
		fontFamily: "sf-medium",
		fontSize: 16,
		lineHeight: 18,
		color: TEXT_DARK,
		backgroundColor: "transparent",
	},
	dropDownItem_Icon: {
		marginRight: 8,
		width: 18,
		alignSelf: "center",
	},
	dropDownItem_IconStyle: {
		fontSize: 16,
		lineHeight: 18,
		textAlign: "center",
	},
};

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

const dropDownItem = connect(mapStateToProps, {})(DropDownItem);
export { dropDownItem as DropDownItem };
