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 { GenericInput } from "./GenericInput";
import {
	TEXT_DARKEST,
	COLOUR_GREEN,
	COLOUR_GRAPEFRUIT,
	getMainBrandingColourFromState,
} from "../colours";
import { RadioButton } from "./RadioButton";

class GenericInputSection extends PureComponent {
	renderValidationDot() {
		if (!this.props.required) {
			return null;
		}
		return (
			<View
				style={[
					styles.validatorDot,
					this.props.isValid() ? styles.validatorTrue : styles.validatorFalse,
				]}
			/>
		);
	}

	renderLabel() {
		if (!this.props.label) {
			return null;
		}
		return (
			<View style={styles.labelContainer}>
				<Text style={[styles.labelText, this.props.labelStyle]}>
					{this.props.label}
				</Text>
				{this.renderValidationDot()}
			</View>
		);
	}

	renderRadioOption(label, value, isActive, onChange, style) {
		return (
			<TouchableOpacity
				onPress={() => onChange(value)}
				key={label}
				style={[styles.radioOption, style]}
				hitSlop={{ top: 8, left: 8, bottom: 8, right: 8 }}
			>
				<RadioButton
					onPress={() => onChange(value)}
					isActive={isActive}
					iconSize={22}
					style={styles.radioOptionButton}
				/>
				<Text style={styles.radioOptionText}>{label}</Text>
			</TouchableOpacity>
		);
	}

	renderInput() {
		if (this.props.children) {
			return this.props.children;
		}
		if (this.props.inputType === "toggle") {
			return (
				<View style={styles.radioOptionsContainer}>
					{this.renderRadioOption(
						"Yes",
						true,
						this.props.value === true,
						this.props.onChange,
					)}
					{this.renderRadioOption(
						"No",
						false,
						this.props.value === false,
						this.props.onChange,
					)}
				</View>
			);
		}
		if (this.props.inputType === "radio") {
			return (
				<View>
					{this.props.options.map((o) => {
						return this.renderRadioOption(
							o.Label,
							o.Value,
							this.props.value === o.Value,
							this.props.onChange,
							styles.radioOptionVertical,
						);
					})}
				</View>
			);
		}
		if (this.props.inputType === "optionSelector") {
			return (
				<TouchableOpacity onPress={this.props.onPress}>
					<View style={styles.optionSelector}>
						<Text style={styles.optionSelectorText}>{this.props.value}</Text>
						<Icon
							name="angle-right"
							type="font-awesome"
							iconStyle={[
								styles.optionSelectorIcon,
								{ color: this.props.colourBrandingMain },
							]}
						/>
					</View>
				</TouchableOpacity>
			);
		}
		return (
			<GenericInput
				{...this.props}
				containerStyle={[styles.input, this.props.containerStyle]}
			/>
		);
	}

	renderError() {
		if (this.props.showError === true && !this.props.isValid()) {
			return (
				<Text style={styles.errorText}>
					{this.props.errorText || "Required"}
				</Text>
			);
		}
		return null;
	}

	render() {
		return (
			<View style={[styles.container, this.props.sectionStyle]}>
				{this.renderLabel()}
				{this.renderInput()}
				{this.renderError()}
			</View>
		);
	}
}

const styles = {
	container: {},
	labelContainer: {
		flexDirection: "row",
		alignItems: "center",
	},
	labelText: {
		fontFamily: "sf-semibold",
		fontSize: 16,
		color: TEXT_DARKEST,
	},
	input: {
		marginTop: 8,
	},
	validatorDot: {
		height: 6,
		width: 6,
		borderRadius: 3,
		marginLeft: 8,
	},
	validatorTrue: {
		backgroundColor: COLOUR_GREEN,
	},
	validatorFalse: {
		backgroundColor: COLOUR_GRAPEFRUIT,
	},
	radioOptionsContainer: {
		flexDirection: "row",
		alignItems: "center",
		marginTop: 8,
	},
	radioOptionVertical: {
		marginTop: 16,
	},
	radioOption: {
		flexDirection: "row",
		alignItems: "center",
		marginRight: 24,
	},
	radioOptionButton: {
		marginRight: 8,
	},
	radioOptionText: {
		fontFamily: "sf-medium",
		fontSize: 14,
		color: TEXT_DARKEST,
	},
	optionSelector: {
		marginTop: 8,
		flex: 1,
		height: 36,
		backgroundColor: "#ebeff2",
		alignItems: "center",
		flexDirection: "row",
		justifyContent: "space-between",
		borderRadius: 5,
		paddingHorizontal: 8,
	},
	optionSelectorText: {
		color: TEXT_DARKEST,
		fontFamily: "sf-regular",
		fontSize: 16,
	},
	errorText: {
		paddingTop: 4,
		fontSize: 13,
		fontFamily: "sf-regular",
		color: COLOUR_GRAPEFRUIT,
	},
};

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

const genericInputSection = connect(mapStateToProps, {})(GenericInputSection);
export { genericInputSection as GenericInputSection };
