import React from "react";
import _ from "lodash";
import { View } from "react-native";
import { Text } from ".";
import { getMainBrandingColourFromState } from "../colours";
import { InlineButton } from "./InlineButton";
import { Services } from "../config";
import { connect } from "react-redux";
import Header from "./Header";

const Forbidden = ({ colourBrandingMain, title, description }) => {
	const goBack = () => {
		Services.navigation.goBack();
	};

	return (
		<View
			style={{
				flex: 1,
				backgroundColor: "#fff",
			}}
		>
			<Header leftIcon="angle-left" onPressLeft={goBack} />
			<View
				style={{
					padding: 16,
				}}
			>
				<Text type="pageHeading" style={{ color: colourBrandingMain }}>
					{!_.isEmpty(title) ? title : "Oops!"}
				</Text>
				<Text type="body" style={{ marginTop: 10 }}>
					{!_.isEmpty(description)
						? description
						: "It seems this item is no longer accessible. It may have been removed or your access might have changed."}
				</Text>
				<View style={{ marginTop: 20 }}>
					<InlineButton onPress={goBack} color={colourBrandingMain}>
						Go back
					</InlineButton>
				</View>
			</View>
		</View>
	);
};

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

const forbidden = connect(mapStateToProps, {}, null, { forwardRef: true })(
	Forbidden,
);
export { forbidden as Forbidden };
