import React, { PureComponent } from "react";
import _ from "lodash";
import { View, Dimensions } from "react-native";
import { Text } from "./Text";
import { connect } from "react-redux";
import { FontAwesome } from "./Icon";
import {
	COLOUR_GREEN,
	TEXT_DARK,
	getMainBrandingColourFromState,
} from "../colours";
import { MiddlePopup } from "./MiddlePopup";
import { InlineButton } from "./InlineButton";

const SCREEN_WIDTH = Dimensions.get("window").width;

class WarningPopup extends PureComponent {
	render() {
		return (
			<MiddlePopup
				visible={this.props.visible}
				onClose={this.props.onClose}
				style={[
					styles.popup,
					this.props.padHorizontal && { paddingHorizontal: 16 },
				]}
			>
				{this.props.isSuccess && (
					<FontAwesome style={styles.icon} name="circle-check" />
				)}
				<Text style={styles.text}>{this.props.confirmText}</Text>
				<View style={{ marginTop: 16, paddingHorizontal: 24 }}>
					<Text style={[styles.infoText, this.props.infoTextStyle]}>
						{this.props.infoText}
					</Text>
				</View>
				<InlineButton
					onPress={this.props.onClose}
					color={this.props.ctaButton ? this.props.colourBrandingMain : "#fff"}
					style={styles.button}
					textStyle={[
						styles.closeText,
						{
							color: this.props.ctaButton
								? "#fff"
								: this.props.colourBrandingMain,
						},
					]}
					large
				>
					{!_.isUndefined(this.props.buttonText)
						? this.props.buttonText
						: "Close"}
				</InlineButton>
			</MiddlePopup>
		);
	}
}

const styles = {
	popup: {
		width: "auto",
		maxWidth: SCREEN_WIDTH - 34,
		paddingVertical: 16,
	},
	icon: {
		marginTop: 20,
		paddingBottom: 16,
		fontSize: 52,
		color: COLOUR_GREEN,
	},
	text: {
		fontFamily: "sf-bold",
		fontSize: 24,
		lineHeight: 24,
		color: TEXT_DARK,
		textAlign: "center",
		marginTop: 8,
	},
	infoText: {
		fontFamily: "sf-regular",
		fontSize: 16,
		lineHeight: 22,
		color: TEXT_DARK,
		textAlign: "left",
	},
	button: {
		width: 130,
		marginTop: 20,
	},
	closeText: {
		fontFamily: "sf-medium",
		fontSize: 15,
	},
};

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

const warningPopup = connect(mapStateToProps, {})(WarningPopup);
export { warningPopup as WarningPopup };
