import {FC, useCallback, useEffect, useState} from "react";
import {StyleSheet, Text, View, ImageBackground, Linking} from 'react-native';
import TelegramAuthButton from "components/TelegramAuthButton/TelegramAuthButton";
import WebView from "react-native-webview";
import InputField from "./components/InputField";
import {useDispatch, useSelector} from "react-redux";
import {loadToken, loginUser} from "features/auth/authSlice";
import {AppDispatch, RootState, useAppDispatch} from "redux/store";
import * as SecureStore from 'expo-secure-store';
import {initializeUseSelector} from "react-redux/es/hooks/useSelector";
import HomeScreen from "../HomeScreen/HomeScreen";
import {RFPercentage, RFValue} from "react-native-responsive-fontsize";
import {responsiveWidth} from "react-native-responsive-dimensions";

function LoginScreen() {
    const dispatch = useAppDispatch();
    const [login, setLogin] = useState('');
    const [password, setPassword] = useState('');
    const {status, errorMessage, isAuthenticated} = useSelector((state: RootState) => state.auth);
    const handleLogin = async () => {
        dispatch(loginUser({login: login, password: password}));
    }


    useEffect(() => {
        dispatch(loadToken());
    }, []);
    return (
        <>
            {<View style={styles.container}>
                <ImageBackground source={require('assets/img/login/backgroud.png')} resizeMode="cover"
                                 style={styles.image}>
                    <View style={styles.block}>
                        <Text style={styles.authText}>Авторизация</Text>
                        <InputField onChange={setLogin} placeholder={"Логин"}/>
                        <InputField onChange={setPassword} secureTextEntry={false} placeholder={"Пароль"}/>
                        <TelegramAuthButton onPress={handleLogin}/>
                        <Text style={{fontSize: 36}}>{errorMessage}</Text>
                    </View>
                </ImageBackground>
            </View>}

        </>

    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    image: {
        flex: 1,
        justifyContent: 'center',
    },
    text: {
        color: 'white',
        fontSize: 42,
        lineHeight: 84,
        fontWeight: 'bold',
        textAlign: 'center',
        backgroundColor: '#000000c0',
    },
    authText: {
        color: '#2478F8',
        fontFamily: 'SF Pro Text',
        fontSize: RFPercentage(3),
        fontStyle: 'normal',
        fontWeight: '500',
    },
    block: {
        marginHorizontal: responsiveWidth(10),
        paddingVertical: "5%",
        paddingHorizontal: "5%",
        borderRadius: RFPercentage(5),
        borderColor: "#2478F8",
        borderWidth: 1,
        borderStyle: "solid",
        backgroundColor: "#C6E0EA",
        alignSelf: "center",
        opacity: 0.8,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 30
    }
})
export default LoginScreen;