import React, { Component } from "react";
import { Text } from "@plusscommunities/pluss-core-app/components";
import _ from "lodash";
import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
import { connect } from "react-redux";
import {
	TEXT_LIGHTER,
	TEXT_DARK,
	COLOUR_GREEN,
	LINEGREY,
	TEXT_LIGHT,
	COLOUR_GRAPEFRUIT,
	getMainBrandingColourFromState,
	getDarkBrandingColourFromState,
} from "../colours";
import { getValueOrDefault } from "../helper";
import { FontAwesome } from "./Icon";

class FormCardSection extends Component {
	constructor(props) {
		super(props);

		this.state = {
			height: getValueOrDefault(this.props.minHeight, 20),
			focused: false,
			isSecure: true,
		};
	}

	onFocus() {
		this.setState({ focused: true });
		if (this.props.onFocus) {
			this.props.onFocus();
		}
	}

	onBlur() {
		this.setState({ focused: false });
		if (this.props.onBlur) {
			this.props.onBlur();
		}
	}

	onGrow(event) {
		this.setState({
			height: Math.max(
				event.nativeEvent.contentSize.height,
				this.props.minHeight,
			),
		});
	}

	toggleSecure() {
		const current = this.state.isSecure;
		this.setState({ isSecure: !current });
	}

	showSecure() {
		if (
			!_.isUndefined(this.props.secureTextToggle) &&
			this.props.secureTextToggle
		) {
			return this.state.isSecure;
		}
		return this.props.secureTextEntry;
	}

	isValid() {
		if (this.props.required && _.isEmpty(this.props.textValue)) {
			return false;
		}
		if (this.props.isValid && !this.props.isValid()) {
			return false;
		}
		return true;
	}

	renderErrorDot() {
		if (this.props.required || this.props.hasError) {
			return (
				<View
					style={[
						styles.errorDot,
						{ backgroundColor: this.props.colourBrandingMain },
						!this.isValid() && styles.errorError,
						this.isValid() && styles.errorValid,
						this.props.errorDotStyle,
					]}
				/>
			);
		}
		return null;
	}

	renderLabel() {
		if (_.isEmpty(this.props.label)) {
			return null;
		}
		return (
			<View style={styles.labelContainer}>
				<Text
					style={[
						styles.labelText,
						this.state.focused && { color: this.props.colourBrandingMain },
						!this.isValid() &&
							!_.isEmpty(this.props.textValue) &&
							styles.labelError,
						this.props.labelStyle,
					]}
				>
					{this.props.label}
				</Text>
				{this.renderErrorDot()}
			</View>
		);
	}

	renderInput() {
		return (
			<View style={{ flexDirection: "row" }}>
				<View style={{ flex: 1 }}>
					<TextInput
						maxFontSizeMultiplier={1.2}
						value={this.props.textValue}
						onChangeText={this.props.onChangeText}
						keyboardType={this.props.keyboardType}
						/* Main Styling Props */
						selectionColor={this.props.colourBrandingDark}
						placeholder={this.props.placeholder}
						placeholderTextColor={
							this.props.placeholderTextColor || TEXT_LIGHTER
						}
						style={[
							styles.inputStyle,
							{
								textAlignVertical: this.props.autoGrow ? "top" : "center",
								color: this.props.textColour || TEXT_DARK,
								minHeight: this.props.minHeight || 20,
							},
							this.props.textStyle,
						]}
						underlineColorAndroid={"rgba(0,0,0,0)"}
						/* Other Props */
						autoFocus={
							_.isUndefined(this.props.autoFocus) ? false : this.props.autoFocus
						}
						editable={
							_.isUndefined(this.props.editable) ? true : this.props.editable
						}
						secureTextEntry={
							_.isUndefined(this.props.secureTextEntry)
								? false
								: this.showSecure()
						}
						autoCorrect={
							_.isUndefined(this.props.autoCorrect)
								? false
								: this.props.autoCorrect
						}
						multiline={
							_.isUndefined(this.props.multiline) ? false : this.props.multiline
						}
						autoGrow={
							_.isUndefined(this.props.autoGrow) ? false : this.props.autoGrow
						}
						autoCapitalize={
							_.isUndefined(this.props.autoCapitalize)
								? "sentences"
								: this.props.autoCapitalize
						}
						onContentSizeChange={this.onGrow.bind(this)}
						/* Focus Props */
						onFocus={this.onFocus.bind(this)}
						onBlur={this.onBlur.bind(this)}
					/>
				</View>
				{!_.isUndefined(this.props.secureTextToggle) &&
					this.props.secureTextToggle && (
						<TouchableOpacity onPress={this.toggleSecure.bind(this)}>
							{/* <Icon
                            name={this.state.isSecure ? 'eye' : 'eye-slash'}
                            type='font-awesome'
                            iconStyle={{ fontSize: 16, color: TEXT_MID, paddingLeft: 16 }}
                        /> */}
							<FontAwesome
								name={this.state.isSecure ? "eye" : "eye-slash"}
								style={{
									fontSize: 21,
									lineHeight: 20,
									color: TEXT_LIGHT,
									paddingLeft: 16,
								}}
							/>
						</TouchableOpacity>
					)}
			</View>
		);
	}

	renderContent() {
		if (this.props.hasContent) {
			return this.props.children;
		}
		if (this.props.pointerEvents) {
			return (
				<View pointerEvents={this.props.pointerEvents}>
					{this.renderInput()}
				</View>
			);
		}
		return this.renderInput();
	}

	render() {
		return (
			<View>
				<View
					style={[
						styles.sectionItem,
						this.props.hasUnderline && styles.sectionItemUnderline,
						this.state.focused && styles.inputFocus,
						this.state.focused && {
							borderBottomColor: this.props.colourBrandingMain,
						},
						!this.isValid() &&
							!_.isEmpty(this.props.textValue) &&
							styles.inputError,
						!_.isUndefined(this.props.showError) &&
							this.props.showError === true &&
							!this.isValid() &&
							styles.inputError,
						this.props.sectionStyle,
					]}
				>
					{this.renderLabel()}
					<View>{this.renderContent()}</View>
				</View>
				{!_.isUndefined(this.props.showError) &&
					this.props.showError === true &&
					!this.isValid() && (
						<Text style={styles.errorText}>{this.props.errorText}</Text>
					)}
			</View>
		);
	}
}

const styles = StyleSheet.create({
	sectionItem: {
		paddingVertical: 16,
		paddingHorizontal: 8,
		borderBottomColor: LINEGREY,
	},
	sectionItemUnderline: {
		borderBottomWidth: 1,
	},
	inputFocus: {
		borderBottomWidth: 1,
	},
	inputError: {
		borderBottomWidth: 1,
		borderBottomColor: COLOUR_GRAPEFRUIT,
	},
	labelContainer: {
		flexDirection: "row",
		alignItems: "center",
		marginBottom: 6,
	},
	labelText: {
		fontFamily: "sf-regular",
		fontSize: 13,
		color: TEXT_LIGHT,
	},
	labelError: {
		color: COLOUR_GRAPEFRUIT,
	},
	errorDot: {
		height: 6,
		width: 6,
		borderRadius: 3,
		marginLeft: 8,
		marginBottom: 3,
	},
	errorError: {
		backgroundColor: COLOUR_GRAPEFRUIT,
	},
	errorValid: {
		backgroundColor: COLOUR_GREEN,
	},
	inputStyle: {
		fontFamily: "sf-regular",
		fontSize: 17,
		margin: 0,
		padding: 0,
	},
	errorText: {
		paddingTop: 8,
		fontSize: 13,
		fontFamily: "sf-regular",
		color: COLOUR_GRAPEFRUIT,
	},
});

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

const formCardSection = connect(mapStateToProps, {})(FormCardSection);
export { formCardSection as FormCardSection };
