import { Grid } from "antd";

const { useBreakpoint } = Grid;

const useProfilePageUI = () => {
    const screens = useBreakpoint();

    const containerStyle = { padding: screens.xs ? 16 : 24 };
    const cardStyle = { marginBottom: 24 };
    const buttonStyle = { width: screens.xs ? "100%" : "auto" };
    const formStyle = { maxWidth: 600 };

    const profileFormRules = {
        first_name: [
            { required: true, message: "Пожалуйста, введите имя" },
            { max: 50, message: "Имя не может превышать 50 символов" },
        ],
        last_name: [
            { required: true, message: "Пожалуйста, введите фамилию" },
            { max: 50, message: "Фамилия не может превышать 50 символов" },
        ],
        patronymic: [
            { max: 50, message: "Отчество не может превышать 50 символов" },
        ],
        login: [
            { required: true, message: "Логин обязателен" },
        ],
    };

    const passwordFormRules = {
        current_password: [
            { required: true, message: "Пожалуйста, введите текущий пароль" },
            { min: 8, message: "Пароль должен содержать минимум 8 символов" },
        ],
        new_password: [
            { required: true, message: "Пожалуйста, введите новый пароль" },
            { min: 8, message: "Пароль должен содержать минимум 8 символов" },
        ],
        confirm_password: [
            { required: true, message: "Пожалуйста, подтвердите новый пароль" },
            ({ getFieldValue }) => ({
                validator(_, value) {
                    if (!value || getFieldValue("new_password") === value) {
                        return Promise.resolve();
                    }
                    return Promise.reject(new Error("Пароли не совпадают"));
                },
            }),
        ],
    };

    return {
        containerStyle,
        cardStyle,
        buttonStyle,
        formStyle,
        profileFormRules,
        passwordFormRules,
        isMobile: screens.xs,
    };
};

export default useProfilePageUI;