import { View, Text, StyleSheet, Pressable } from "react-native";
import NormalButton from "../../../global/normal_button";
import Logo from "../../../global/logo";
import PhoneInput from "../../../global/phone_input";
import NormalInput from "../../../global/normal_input";
import { useState } from "react";

type LoginPageProps = {
	goToNextPage: () => void;
};

const LoginPage: React.FC<LoginPageProps> = ({ goToNextPage }) => {
	const [loginPhone, setLoginPhone] = useState(""); //This loginPhone useState is only a placeholder, will be updated in the future
	return (
		<>
			<View style={styles.container}>
				<View style={styles.topContainerForLogo}>
					<Logo />
				</View>
				<View style={styles.bottomContainer}>
					<PhoneInput
						value={loginPhone}
						onChangeText={(t) => {
							setLoginPhone(t);
							console.log(loginPhone);
						}}
						placeholder="電話號碼"
						extendedStyle={{ borderRadius: 12, padding: 20 }}
					/>
					<NormalInput
						placeholder="密碼"
						onChangeText={(password) => console.log(password)}
						secureTextEntry={true}
						extendedStyle={{ borderRadius: 12, padding: 20 }}
					/>
					<Pressable>
						<Text style={styles.text}>忘記密碼</Text>
					</Pressable>
					<NormalButton
						onPress={() => console.log("登入")}
						title={<Text style={{ fontWeight: "700", fontSize: 20, color: "#fff" }}>登入</Text>}
					/>
					<Pressable onPress={goToNextPage}>
						<Text style={styles.text}>註冊會員</Text>
					</Pressable>
				</View>
			</View>
		</>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		gap: 50,
		marginHorizontal: 20,
	},
	topContainerForLogo: {
		flex: 1 / 2,
	},
	bottomContainer: {
		flex: 1,
		gap: 10,
	},
	text: {
		color: "#02677D",
		fontSize: 16,
		paddingVertical: 5,
	},
});
export default LoginPage;