import React, { PureComponent } from "react";
import { View, TouchableOpacity } from "react-native";
import { Text } from "./Text";
import { Icon } from "@rneui/themed";
import { connect } from "react-redux";
import {
	TEXT_DARK,
	TEXT_LIGHT,
	getMainBrandingColourFromState,
} from "../colours";
import { FormCardSection } from "./FormCardSection";

class FormCardSectionOptionLauncher extends PureComponent {
	render() {
		const {
			onPress,
			sectionStyle,
			textStyle,
			title,
			description,
			value,
			icon,
			colourBrandingMain,
		} = this.props;

		return (
			<TouchableOpacity onPress={onPress}>
				<FormCardSection hasContent sectionStyle={sectionStyle}>
					<View style={styles.container}>
						<Text
							style={[styles.text, { marginRight: 16, flex: 1 }, textStyle]}
						>
							{title}
						</Text>
						<Text style={[styles.text, { marginRight: 16 }]}>{value}</Text>
						<Icon
							name={icon ? icon : "angle-right"}
							type="font-awesome"
							iconStyle={[
								styles.text,
								{ fontSize: 20, color: colourBrandingMain },
							]}
						/>
					</View>
					{description ? (
						<Text style={styles.description}>{description}</Text>
					) : null}
				</FormCardSection>
			</TouchableOpacity>
		);
	}
}

const styles = {
	container: {
		flexDirection: "row",
		alignSelf: "stretch",
		alignItems: "center",
	},
	text: {
		fontFamily: "sf-regular",
		fontSize: 17,
		color: TEXT_DARK,
	},
	description: {
		fontFamily: "sf-regular",
		fontSize: 15,
		color: TEXT_LIGHT,
		marginTop: 8,
	},
};

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

const formCardSectionOptionLauncher = connect(
	mapStateToProps,
	{},
)(FormCardSectionOptionLauncher);
export { formCardSectionOptionLauncher as FormCardSectionOptionLauncher };
