'use strict';
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect, Fragment } from 'react';
import { DynamicLayoutDragAndDrop } from '../../../fd-component-toolbox/dynamic-layout/DynamicLayoutDragAndDrop.js';
import { Dynamic } from '../../../fd-component-toolbox/dynamic-layout/Dynamic.js';
import { goBack } from '../../../../fd-toolbox/routing/routers.js';
import { SubHeading } from '../../../fd-component-toolbox/subheading/SubHeading.js';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { Icon, iconSizes, iconNames } from '../../../fd-component-toolbox/icon/Icon.js';
import { useSetTitle } from '../../../meta/page/use-set-title.js';
import { onInitDashboardPage, dashboardLayoutConfig } from './DashboardPage.funcs.js';
import { ReportComponent } from '../../../fd-app-toolbox/report/ReportComponent.js';
import { useEmptyRef } from '../../../../fd-toolbox/hooks/use-empty-ref.js';
import { resourceNames } from '../../../../fd-toolbox/resources/resource-names.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function DashboardPage() {
  const [dashboardReports, setDashboardReports] = useState([]);
  const [width, setWidth] = useState(0);
  const containerRef = useEmptyRef();
  useSetTitle(resourceNames.dashboard);
  useEffect(() => {
    setWidth(window.innerWidth);
    return onInitDashboardPage(setWidth, setDashboardReports, containerRef.current ?? void 0);
  }, [containerRef]);
  return /* @__PURE__ */jsxs("div", {
    ref: containerRef,
    className: "overflow-auto p-6",
    children: [/* @__PURE__ */jsxs("div", {
      className: "mb-4 flex items-center gap-1",
      children: [/* @__PURE__ */jsx(Button, {
        variant: "ghost",
        size: "icon",
        className: "size-5",
        children: /* @__PURE__ */jsx(Icon, {
          name: iconNames.arrowLeft,
          size: iconSizes.small,
          onClick: goBack
        })
      }), /* @__PURE__ */jsx(SubHeading, {
        children: "Dashboards"
      })]
    }), /* @__PURE__ */jsx("div", {
      className: "flex flex-col gap-2 p-2",
      children: /* @__PURE__ */jsx(DynamicLayoutDragAndDrop, {
        componentClassName: "bg-card shadow rounded-xl",
        columns: 15,
        children: dashboardReports.map(dashboardReport => {
          return /* @__PURE__ */jsx(Fragment, {
            children: /* @__PURE__ */jsx(Dynamic, {
              defaultX: Math.max(0, dashboardReport.positionX),
              defaultY: Math.max(0, dashboardReport.positionY),
              defaultWidth: Math.max(0, width < dashboardLayoutConfig.breakpointWidth ? dashboardLayoutConfig.defaultWidth : dashboardReport.sizeX),
              defaultHeight: Math.max(0, width < dashboardLayoutConfig.breakpointWidth ? dashboardLayoutConfig.defaultHeight : dashboardReport.sizeY),
              minWidth: dashboardLayoutConfig.minWidth,
              minHeight: dashboardLayoutConfig.minHeight,
              id: dashboardReport.id,
              children: /* @__PURE__ */jsx(ReportComponent, {
                type: dashboardReport.report.type,
                report: dashboardReport.report,
                reportId: dashboardReport.reportId
              })
            }, dashboardReport.id)
          }, dashboardReport.id);
        })
      })
    })]
  });
}
__name(DashboardPage, "DashboardPage");

export { DashboardPage as default };
