import { useEffect } 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 } = useSelector((state) => state.auth);
    const screens = useBreakpoint();

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

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

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

    const errorStyle = {
        color: "red",
        marginBottom: 15,
    };

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

    useEffect(() => {
        if (user) {
            navigate("/");
        }
        document.title = labels.title;
    }, [user, navigate]);

    return {
        containerStyle,
        formContainerStyle,
        titleStyle,
        errorStyle,
        labels,
    };
};

export default useLoginPageUI;