"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserProfile = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_2 = require("@chakra-ui/react");
const api_js_1 = require("../../services/api.js");
/**
 * UserProfile component that demonstrates using the API client
 * to fetch and display user data
 */
const UserProfile = () => {
    const [user, setUser] = (0, react_1.useState)(null);
    const [loading, setLoading] = (0, react_1.useState)(true);
    const [error, setError] = (0, react_1.useState)(null);
    const toast = (0, react_2.useToast)();
    // Fetch user profile on component mount
    (0, react_1.useEffect)(() => {
        const fetchUserProfile = async () => {
            try {
                setLoading(true);
                setError(null);
                const userData = await api_js_1.userApi.getProfile();
                setUser(userData);
            }
            catch (err) {
                console.error('Failed to fetch user profile:', err);
                setError('Unable to load user profile. Please try again later.');
            }
            finally {
                setLoading(false);
            }
        };
        fetchUserProfile();
    }, []);
    // Handle refresh button click
    const handleRefresh = async () => {
        try {
            setLoading(true);
            setError(null);
            const userData = await api_js_1.userApi.getProfile();
            setUser(userData);
            toast({
                title: 'Profile refreshed',
                status: 'success',
                duration: 3000,
                isClosable: true,
            });
        }
        catch (err) {
            console.error('Failed to refresh user profile:', err);
            setError('Unable to refresh user profile. Please try again later.');
            toast({
                title: 'Error',
                description: 'Failed to refresh profile',
                status: 'error',
                duration: 5000,
                isClosable: true,
            });
        }
        finally {
            setLoading(false);
        }
    };
    // Show loading state
    if (loading && !user) {
        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { textAlign: "center", py: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xl" }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 4, children: "Loading user profile..." })] }));
    }
    // Show error state
    if (error && !user) {
        return ((0, jsx_runtime_1.jsxs)(react_2.Alert, { status: "error", variant: "subtle", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", height: "200px", borderRadius: "md", children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, { boxSize: "40px", mr: 0 }), (0, jsx_runtime_1.jsx)(react_2.AlertTitle, { mt: 4, mb: 1, fontSize: "lg", children: "Error Loading Profile" }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { maxWidth: "sm", children: error }), (0, jsx_runtime_1.jsx)(react_2.Button, { mt: 4, onClick: handleRefresh, children: "Try Again" })] }));
    }
    // Show user profile
    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderWidth: "1px", borderRadius: "lg", overflow: "hidden", p: 6, boxShadow: "md", bg: "white", children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 6, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "xl", name: user?.firstName && user?.lastName
                                ? `${user.firstName} ${user.lastName}`
                                : user?.username || '', src: user?.avatar || '' }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "lg", children: user?.firstName && user?.lastName
                                        ? `${user.firstName} ${user.lastName}`
                                        : user?.username }), (0, jsx_runtime_1.jsxs)(react_2.Text, { color: "gray.600", children: ["@", user?.username] }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: "gray.600", children: user?.email }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: "white", bg: user?.role === "admin" ? "red.500" : "blue.500", px: 2, py: 1, borderRadius: "md", fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", children: user?.role })] })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { mt: 4, children: (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: handleRefresh, isLoading: loading, loadingText: "Refreshing", size: "sm", colorScheme: "blue", children: "Refresh Profile" }) })] }) }));
};
exports.UserProfile = UserProfile;
exports.default = exports.UserProfile;
//# sourceMappingURL=UserProfile.js.map