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 {useAppDispatch} from "redux/store";
import {RFPercentage, RFValue} from "react-native-responsive-fontsize";
import {responsiveWidth} from "react-native-responsive-dimensions";
import userApi from "../../api/userApi";
import {useDispatch} from "react-redux";
import {login} from "../../features/auth/authSlice";
import Toast from "react-native-toast-message";
import * as SecureStore from 'expo-secure-store';
import KeyEvent from "react-native-keyevent";

function LoginScreen() {
    const dispatch = useAppDispatch();
    const [loginValue, setLoginValue] = useState('');
    const [passwordValue, setPasswordValue] = useState('');
    const handleLogin = async () => {
        const response = await userApi.login(loginValue, passwordValue);
        if (!response.ok) {
            Toast.show({
                type: 'error',
                text1: 'Ошибка авторизации',
                text2: 'Неудалось войти используя указанные данные!'
            });
            setLoginValue("");
            setPasswordValue("");
            return;
        }
        await SecureStore.setItemAsync('accessToken', response.accessToken);
        dispatch(login({accessToken: response.accessToken}));
    }




    useEffect(() => {
    }, []);
    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 value={loginValue} onChange={setLoginValue} placeholder={"Логин"}/>
                        <InputField value={passwordValue} onChange={setPasswordValue} secureTextEntry={false} placeholder={"Пароль"}/>
                        <TelegramAuthButton onPress={handleLogin}/>
                    </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',
        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;