import React, { PureComponent } from "react";
import { View, TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import stylez from "../styles";
import { FontAwesome } from "./Icon";
import { getMainBrandingColourFromState } from "../colours";

/* 
Props- 
    onPress - onPress action
    diameter - size of button
    color - default will be aveoMain
    style - custom style for container
*/

class BackButton extends PureComponent {
	render() {
		const size = this.props.diameter || 32;
		const radius = size / 2;
		if (this.props.noClick) {
			return (
				<View
					style={[
						stylez.backButton,
						{
							backgroundColor: this.props.colourBrandingMain,
							height: size,
							width: size,
							borderRadius: radius,
						},
						this.props.color && { backgroundColor: this.props.color },
						this.props.style,
					]}
				>
					<FontAwesome
						name={this.props.flipped ? "chevron-right" : "chevron-left"}
						style={[stylez.backButtonIcon, this.props.iconStyle]}
					/>
				</View>
			);
		}
		return (
			<TouchableOpacity
				style={[
					stylez.backButton,
					{
						backgroundColor: this.props.colourBrandingMain,
						height: size,
						width: size,
						borderRadius: radius,
					},
					this.props.color && { backgroundColor: this.props.color },
					this.props.style,
				]}
				onPress={this.props.onPress}
			>
				<FontAwesome
					name={this.props.flipped ? "chevron-right" : "chevron-left"}
					style={[stylez.backButtonIcon, this.props.iconStyle]}
				/>
			</TouchableOpacity>
		);
	}
}

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

const backButton = connect(mapStateToProps, {})(BackButton);
export { backButton as BackButton };
