import { asp as g } from "@asp/asp";
import { BarnoinPayBackground } from "@components/BarnoinPayBackground";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import * as Button from "@components/ButtonNew";
import Ionicons from "@expo/vector-icons/Ionicons";
import { LOG } from "@logger";
import { Text, View } from "react-native";
import { useDispatch } from "react-redux";
import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
import { logout } from "@/features/auth/slice";

const log = LOG.extend("UserProfileScreen");
const UserProfileScreen = () => {
	log.verbose("UserProfileScreen");

	const dispatch = useDispatch();

	const { userInformations } = useUserAuthenticationContext();

	return (
		<BarnoinPayBackground style={[g.flex_col, g.justify_between]}>
			<View style={[g.px_lg, g.flex_row, g.justify_between]}>
				<BeasyLogoIcon />
				<Ionicons name="notifications" size={24} color="black" />
			</View>

			<View
				style={[
					g.gap_md,
					g.p_md,
					{
						borderTopLeftRadius: 20,
						borderTopRightRadius: 20,
						backgroundColor: "white",
						height: "90%",
					},
				]}
			>
				<View style={[g.w_full, g.rounded_md, g.p_md, { backgroundColor: "#F4F4F4" }]}>
					<View style={[g.flex_row, g.gap_sm, g.py_sm]}>
						<View
							style={[
								g.rounded_full,
								{ height: 70, aspectRatio: 1, backgroundColor: "green" },
							]}
						/>

						<View style={[g.flex_1, g.flex_col]}>
							<Text style={[g.font_bold]}>
								{userInformations.first_name} {userInformations.last_name}
							</Text>
							<Text>{userInformations.email}</Text>
						</View>
					</View>
					<View style={[g.w_full, g.flex_row, g.justify_between, g.py_md]}>
						<Text style={[g.font_bold]}>Utilisateur</Text>
						<Text style={[g.text_center]}>{userInformations.username}</Text>
					</View>
				</View>

				<Button.Container
					style={[g.rounded_lg, { backgroundColor: "#960101ff" }]}
					onPress={() => dispatch(logout())}
				>
					<Button.Label>Deconnexion</Button.Label>
				</Button.Container>

				<Text style={[g.font_bold]}>Informations sur le marchand</Text>
				<View
					style={[
						g.w_full,
						g.rounded_md,
						g.p_sm,
						g.flex_col,
						{ backgroundColor: "#F4F4F4" },
					]}
				>
					<View
						style={[
							g.w_full,
							g.flex_row,
							g.justify_between,
							g.py_md,
							{ borderBottomColor: "white", borderBottomWidth: 1 },
						]}
					>
						<Text style={[g.font_bold]}>Identifiant</Text>
						<Text style={[g.text_center]}>{userInformations.marchand.marchand_id}</Text>
					</View>
					<View
						style={[
							g.w_full,
							g.flex_row,
							g.justify_between,
							g.py_md,
							{ borderBottomColor: "white", borderBottomWidth: 1 },
						]}
					>
						<Text style={[g.font_bold]}>Entreprise</Text>
						<Text style={[g.text_center]}>{userInformations.marchand.nom}</Text>
					</View>
					<View
						style={[
							g.w_full,
							g.flex_row,
							g.justify_between,
							g.py_md,
							{ borderBottomColor: "white", borderBottomWidth: 1 },
						]}
					>
						<Text style={[g.font_bold]}>Code</Text>
						<Text style={[g.text_center]}>{userInformations.marchand.code}</Text>
					</View>
					<View
						style={[
							g.w_full,
							g.flex_row,
							g.justify_between,
							g.py_md,
							{ borderBottomColor: "white", borderBottomWidth: 1 },
						]}
					>
						<Text style={[g.font_bold]}>Addresse</Text>
						<Text style={[g.text_center]}>{userInformations.marchand.adresse}</Text>
					</View>
					<View
						style={[
							g.w_full,
							g.flex_row,
							g.justify_between,
							g.py_md,
							{ borderBottomColor: "white", borderBottomWidth: 1 },
						]}
					>
						<Text style={[g.font_bold]}>Url succès</Text>
						<Text style={[g.text_center]}>{userInformations.marchand.url_succes}</Text>
					</View>
					<View style={[g.w_full, g.flex_row, g.py_md, g.justify_between]}>
						<Text style={[g.font_bold]}>Url échec</Text>
						<Text style={[g.text_center]}>{userInformations.marchand.url_echec}</Text>
					</View>
				</View>
			</View>
		</BarnoinPayBackground>
	);
};

export default UserProfileScreen;