import React, { PureComponent } from "react";
import { Text } from "@plusscommunities/pluss-core-app/components";
import {
	View,
	TouchableOpacity,
	TouchableWithoutFeedback,
	StyleSheet,
} from "react-native";
import { connect } from "react-redux";
import {
	getMainBrandingColourFromState,
	LINEGREY,
	TEXT_DARKEST,
} from "../colours";

class RadioButton extends PureComponent {
	render() {
		const { size, isActive, value, onPress, colourBrandingMain, style, label } =
			this.props;
		const iconSize = size || 20;
		const innerSize = iconSize - 8;

		const content = (
			<TouchableWithoutFeedback onPress={() => onPress(value)}>
				<View
					style={[
						styles.container,
						{ width: iconSize, height: iconSize, borderRadius: iconSize / 2 },
						style,
					]}
				>
					{isActive && (
						<View
							style={{
								width: innerSize,
								height: innerSize,
								borderRadius: innerSize / 2,
								backgroundColor: colourBrandingMain,
							}}
						/>
					)}
				</View>
			</TouchableWithoutFeedback>
		);

		if (label) {
			return (
				<TouchableOpacity
					onPress={() => onPress(value)}
					key={label}
					style={styles.radioOption}
					hitSlop={{ top: 8, left: 8, bottom: 8, right: 8 }}
				>
					{content}
					<Text style={styles.radioOptionText}>{label}</Text>
				</TouchableOpacity>
			);
		}

		return content;
	}
}

const styles = StyleSheet.create({
	container: {
		borderColor: LINEGREY,
		borderWidth: 1,
		backgroundColor: "#fff",
		alignItems: "center",
		justifyContent: "center",
	},
	radioOption: {
		flexDirection: "row",
		marginRight: 26,
	},
	radioOptionText: {
		fontFamily: "sf-medium",
		fontSize: 14,
		color: TEXT_DARKEST,
	},
});

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

const radioButton = connect(mapStateToProps, {})(RadioButton);
export { radioButton as RadioButton };
