"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DashboardWidget = exports.DashboardGrid = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
* Dashboard / Main Content Area Component
*
* Acts as the primary container for various content panels and widgets
*/
const react_1 = __importDefault(require("react"));
const acui_1 = require("@Acme Corporation/acui");
const theme_1 = require("@Acme Corporation/acui/theme");
const useDashboardData_1 = require("../../hooks/useDashboardData");
const Dashboard = () => {
    const theme = (0, theme_1.useTheme)();
    const { data, loading, error } = (0, useDashboardData_1.useDashboardData)();
    if (loading) {
        return (0, jsx_runtime_1.jsx)(acui_1.Loader, { size: "large" });
    }
    if (error) {
        return (0, jsx_runtime_1.jsx)(acui_1.Toast, { type: "error", message: error.message });
    }
    return ((0, jsx_runtime_1.jsxs)("div", { className: "dashboard", style: {
            padding: theme.spacing.large,
            backgroundColor: theme.colors.background
        }, children: [(0, jsx_runtime_1.jsx)("h1", { style: {
                    color: theme.colors.primary,
                    marginBottom: theme.spacing.medium
                }, children: "Acme Corporation Dashboard" }), (0, jsx_runtime_1.jsx)("div", { className: "dashboard-grid", style: {
                    display: 'grid',
                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
                    gap: theme.spacing.medium
                }, children: data.metrics.map((metric) => ((0, jsx_runtime_1.jsxs)(acui_1.Card, { style: { padding: theme.spacing.medium }, children: [(0, jsx_runtime_1.jsx)("h3", { style: {
                                color: theme.colors.text,
                                marginBottom: theme.spacing.small
                            }, children: metric.title }), (0, jsx_runtime_1.jsx)("p", { style: {
                                fontSize: theme.typography.sizes.large,
                                color: theme.colors.primary
                            }, children: metric.value })] }, metric.id))) }), (0, jsx_runtime_1.jsx)("div", { className: "dashboard-table", style: {
                    marginTop: theme.spacing.large
                }, children: (0, jsx_runtime_1.jsx)(acui_1.Table, { data: data.activities, columns: [
                        { key: "timestamp", label: "Time" },
                        { key: "type", label: "Type" },
                        { key: "description", label: "Description" }
                    ], pagination: (0, jsx_runtime_1.jsx)(acui_1.Pagination, { total: data.activities.length, pageSize: 10, onChange: (page) => console.log("Page changed:", page) }) }) })] }));
};
// Grid layout for dashboard widgets
const DashboardGrid = ({ children, columns = "auto-fill", gap = "1rem", className = "" }) => {
    return ((0, jsx_runtime_1.jsx)("div", { className: `bf-dashboard-grid ${className}`, style: {
            gridTemplateColumns: typeof columns === 'number'
                ? `repeat(${columns}, 1fr)`
                : `repeat(${columns}, minmax(300px, 1fr))`,
            gap
        }, children: children }));
};
exports.DashboardGrid = DashboardGrid;
// Widget component for dashboard
const DashboardWidget = ({ title, subtitle, icon, actions = [], children, className = '', minHeight, maxHeight, loading = false, error = null, fullWidth = false, collapsible = false, defaultCollapsed = false }) => {
    const [collapsed, setCollapsed] = react_1.default.useState(defaultCollapsed);
    return ((0, jsx_runtime_1.jsxs)("div", { className: `bf-dashboard-widget ${className} ${fullWidth ? "bf-widget-full-width" : ""}`, style: {
            minHeight: collapsed ? 'auto' : minHeight,
            maxHeight: collapsed ? 'auto' : maxHeight
        }, children: [(title || actions.length > 0) && ((0, jsx_runtime_1.jsxs)("div", { className: "bf-widget-header", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bf-widget-title-container", children: [icon && (0, jsx_runtime_1.jsx)("div", { className: "bf-widget-icon", children: icon }), (0, jsx_runtime_1.jsxs)("div", { children: [title && (0, jsx_runtime_1.jsx)("h2", { className: "bf-widget-title", children: title }), subtitle && (0, jsx_runtime_1.jsx)("p", { className: "bf-widget-subtitle", children: subtitle })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bf-widget-actions", children: [actions.map((action, index) => ((0, jsx_runtime_1.jsx)("div", { className: "bf-widget-action", children: action }, index))), collapsible && ((0, jsx_runtime_1.jsx)("button", { className: "bf-widget-collapse-btn", onClick: () => setCollapsed(!collapsed), "aria-label": collapsed ? "Expand" : "Collapse", children: collapsed ? "↓" : "↑" }))] })] })), !collapsed && ((0, jsx_runtime_1.jsx)("div", { className: "bf-widget-content", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "bf-widget-loading", children: [(0, jsx_runtime_1.jsx)("div", { className: "bf-loader" }), (0, jsx_runtime_1.jsx)("p", { children: "Loading widget..." })] })) : error ? ((0, jsx_runtime_1.jsxs)("div", { className: "bf-widget-error", children: [(0, jsx_runtime_1.jsx)("div", { className: "bf-error-icon", children: "\u26A0\uFE0F" }), (0, jsx_runtime_1.jsx)("p", { children: error })] })) : children }))] }));
};
exports.DashboardWidget = DashboardWidget;
exports.default = Dashboard;
//# sourceMappingURL=Dashboard.js.map