import React, { useState } from 'react';
import { Button, Image, StyleSheet, Text, View } from 'react-native';
import { useLoginCom } from '@/components/useLogin';
import {
	Modal,
	ModalContent,
	ModalFooter,
	ModalButton,
} from 'react-native-modals';

const Me = (props: any) => {
	const { isLogin, loading, userInfo, goTwitterAuthorize, logOut } =
		useLoginCom(props);
	const [showDialog, setShowDialog] = useState(false);
	const handleLogOut = () => {
		setShowDialog(true);
	};
	return (
		<>
			{!!isLogin && (
				<View style={styles.contain}>
					<View style={styles.userInfo}>
						<Image
							style={styles.userPhoto}
							source={{
								uri: userInfo.avatarUrl,
							}}
						/>
						<Text style={styles.userName}>{userInfo.nickName}</Text>
					</View>
					<View style={styles.logOutContain}>
						<View style={styles.logOutBtn}>
							<Button
								title="Log out"
								color="#FF0000"
								onPress={handleLogOut}
							/>
						</View>
						<View style={styles.tips}>
							<Text style={styles.tipsText}>Version 1.0.2</Text>
							<Text style={styles.tipsText}>  |  </Text>
							<Text style={styles.tipsText}>用户协议</Text>
							<Text style={styles.tipsText}>  |  </Text>
							<Text style={styles.tipsText}>隐私协议</Text>
						</View>
					</View>
				</View>
			)}
			{!isLogin && (
				<>
					<View style={styles.contain}>
						<Button
							title="Log in"
							color="#FF0000"
							onPress={goTwitterAuthorize}
						/>
					</View>
				</>
			)}
			{showDialog && (
				<View style={styles.modalContain}>
					<Modal
						visible={showDialog}
						footer={
							<ModalFooter>
								<ModalButton
									textStyle={{ color: '#ff0000' }}
									text="Log out"
									onPress={() => {
										logOut();
										setShowDialog(false);
									}}
								/>
								<ModalButton
									textStyle={{ color: '#000' }}
									text="Cancel"
									onPress={() => {
										setShowDialog(false);
									}}
								/>
							</ModalFooter>
						}>
						<ModalContent>
							<View style={styles.modalContent}>
								<Text style={styles.modalText}>
									Comfirm to Log Out
								</Text>
							</View>
						</ModalContent>
					</Modal>
				</View>
			)}
		</>
	);
};

const styles = StyleSheet.create({
	contain: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'space-between',
		backgroundColor: '#fff',
	},
	userInfo: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
		marginTop: 80,
	},
	userPhoto: {
		marginBottom: 22,
		width: 100,
		height: 100,
		borderRadius: 50,
	},
	userName: {
		fontSize: 18,
		fontWeight: 'bold',
	},
	logOutContain: {
		marginBottom: 30,
	},
	logOutBtn: {
		marginBottom: 20,
		width: 343,
		height: 44,
		backgroundColor: '#FEF8F8',
		borderRadius: 100,
	},
	tips: {
		display: 'flex',
		flexDirection: 'row',
		justifyContent: 'center',
	},
	tipsText: {
		color: '#B8B8B8',
		fontSize: 12,
	},
	modalContain: {
		width: 300,
		height: 165,
	},
	modalContent: {
		width: 300,
		height: 80,
		justifyContent: 'center',
		alignItems: 'center',
		textAlign: 'center',
	},
	modalText: {},
});

export default Me;
