import React, { Component } from "react";
import { View, TouchableWithoutFeedback } from "react-native";
import { Text } from "./Text";
import { connect } from "react-redux";
import { getSiteSettingFromState } from "../helper";
import { TEXT_LIGHT, BOXGREY } from "../colours";
import { FontAwesome } from "./Icon";
import Config, { Services } from "../config";

class TouchableSearchBar extends Component {
	onPressSearch = () => {
		Services.navigation.navigate("search", {
			priorityType: this.props.priorityType,
			searchName: this.props.searchName,
		});
	};

	render() {
		return (
			<TouchableWithoutFeedback onPress={this.onPressSearch}>
				<View
					style={[
						styles.searchInputContainer,
						this.props.headerType !== "white" && { backgroundColor: "#fff" },
						this.props.style,
					]}
				>
					<FontAwesome name="magnifying-glass" style={styles.searchIcon} />
					<Text
						style={styles.searchText}
					>{`Search ${this.props.searchName}`}</Text>
				</View>
			</TouchableWithoutFeedback>
		);
	}
}

const styles = {
	searchInputContainer: {
		flex: 1,
		height: 36,
		marginHorizontal: 16,
		marginVertical: 17,
		borderRadius: 25,
		backgroundColor: BOXGREY,
		alignItems: "center",
		justifyContent: "center",
		flexDirection: "row",
		paddingHorizontal: 16,
	},
	searchIcon: {
		fontSize: 14,
		color: TEXT_LIGHT,
		marginRight: 8,
	},
	searchText: {
		fontSize: 14,
		color: TEXT_LIGHT,
		fontFamily: "sf-medium",
	},
};

const mapStateToProps = (state) => {
	return {
		headerType: getSiteSettingFromState(
			state,
			"HeaderType",
			getSiteSettingFromState(
				state,
				"UseGradientHeader",
				Config.env.hasGradientHeader,
			)
				? "gradient"
				: "white",
		),
	};
};

const touchableSearchBar = connect(mapStateToProps, {})(TouchableSearchBar);
export { touchableSearchBar as TouchableSearchBar };
