import React, { Component } from "react";
import { View, TouchableOpacity } from "react-native";
import { Text } from "./Text";

class InlineButton extends Component {
	renderContent() {
		if (this.props.noText) {
			return this.props.children;
		}
		return (
			<Text
				style={[
					styles.text,
					(this.props.large || this.props.fullWidth) && styles.textLarge,
					this.props.textStyle,
				]}
				numberOfLines={this.props.numberOfLines || 1}
			>
				{this.props.children}
			</Text>
		);
	}

	renderExtra() {
		if (this.props.extraContent) {
			return this.props.extraContent;
		}
		return null;
	}

	render() {
		return (
			<TouchableOpacity
				style={[
					(this.props.fillTouchable || this.props.fullWidth) && {
						flexDirection: "row",
					},
					this.props.fullWidth && { flex: 1 },
					this.props.disabled && this.props.disabledOpacity && { opacity: 0.4 },
					this.props.touchableStyle,
				]}
				onPress={this.props.onPress}
				disabled={this.props.disabled}
			>
				<View
					style={[
						styles.container,
						(this.props.large || this.props.fullWidth) && styles.containerLarge,
						(this.props.fillTouchable || this.props.fullWidth) && { flex: 1 },
						this.props.border && {
							borderColor: this.props.border,
							borderWidth: 1,
						},
						this.props.style,
						{ backgroundColor: this.props.color },
					]}
				>
					{this.renderContent()}
				</View>
				{this.renderExtra()}
			</TouchableOpacity>
		);
	}
}

const styles = {
	container: {
		alignItems: "center",
		justifyContent: "center",
		paddingHorizontal: 16,
		height: 28,
		borderRadius: 4,
		alignSelf: "flex-start",
	},
	containerLarge: {
		height: 36,
	},
	text: {
		color: "#fff",
		fontFamily: "sf-semibold",
		fontSize: 14,
		paddingBottom: 1,
	},
	textLarge: {
		fontSize: 15,
	},
};

export { InlineButton };
