import { useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { Grid } from "antd";

const { useBreakpoint } = Grid;

const useLoginPageUI = () => {
    const navigate = useNavigate();
    const { user, userData, isLoading } = useSelector((state) => state.auth);
    const screens = useBreakpoint();
    const hasRedirected = useRef(false);

    const containerStyle = {
        minHeight: "100vh",
    };

    const formContainerStyle = {
        padding: screens.xs ? 10 : 20,
        border: "1px solid #ddd",
        borderRadius: 8,
        textAlign: "center",
    };

    const titleStyle = {
        textAlign: "center",
        marginBottom: 20,
    };

    const logoStyle = {
        width: 80,
        marginBottom: 10,
        borderRadius: 20,
        border: "1px solid #ddd",
    };

    const appNameStyle = {
        textAlign: "center",
        color: "#1890ff",
        marginBottom: 40,
    };

    const logoBlockStyle = {
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
    };

    const labels = {
        title: "Авторизация",
        loginPlaceholder: "Логин",
        passwordPlaceholder: "Пароль",
        submitButton: "Войти",
        loginRequired: "Пожалуйста, введите логин",
        passwordRequired: "Пожалуйста, введите пароль",
    };

    useEffect(() => {
        if (user && userData && !isLoading && !hasRedirected.current) {
            hasRedirected.current = true;
            navigate("/");
        }
        document.title = labels.title;
    }, [user, userData, isLoading, navigate]);

    return {
        containerStyle,
        formContainerStyle,
        titleStyle,
        logoStyle,
        appNameStyle,
        labels,
        logoBlockStyle,
    };
};

export default useLoginPageUI;