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

class Toggle extends PureComponent {
	render() {
		return (
			<View style={[styles.container, this.props.style]}>
				{this.props.options.map((option, index) => {
					return (
						<TouchableOpacity
							onPress={() => {
								this.props.onPress(option);
							}}
							style={[
								styles.tag,
								{ borderColor: this.props.colourBrandingMain },
								option.val === this.props.activeVal && {
									borderColor: this.props.colourBrandingMain,
									backgroundColor: this.props.colourBrandingMain,
								},
								index === 0 && styles.firstTag,
								index === this.props.options.length - 1 && styles.lastTag,
								this.props.tagStyle,
							]}
							key={option.val}
						>
							<Text
								style={[
									styles.text,
									{ color: this.props.colourBrandingMain },
									option.val === this.props.activeVal && styles.activeText,
									this.props.textStyle,
								]}
							>
								{option.text}
							</Text>
						</TouchableOpacity>
					);
				})}
			</View>
		);
	}
}

const styles = {
	container: {
		flexDirection: "row",
	},
	text: {
		fontFamily: "sf-semibold",
		fontSize: 14,
		textAlign: "center",
	},
	activeText: {
		color: "#fff",
	},
	tag: {
		flex: 1,
		height: 34,
		borderWidth: 1,
		borderLeftWidth: 0,
		justifyContent: "center",
	},
	firstTag: {
		borderLeftWidth: 1,
		borderTopLeftRadius: 4,
		borderBottomLeftRadius: 4,
	},
	lastTag: {
		borderTopRightRadius: 4,
		borderBottomRightRadius: 4,
	},
};

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

const toggle = connect(mapStateToProps, {})(Toggle);
export { toggle as Toggle };
