'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { initReportChart } from './ReportChart.funcs.js';
import { useAsyncEffect } from '../../../../fd-toolbox/hooks/use-async-effect.js';
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../../../fd-component-toolbox/card/Card.js';
import { Chart } from '../Chart.js';
import { useOptionalPromise } from '../../../../fd-toolbox/hooks/use-optional-promise.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function ReportChart(t0) {
  const $ = c(11);
  const {
    report,
    reportId
  } = t0;
  const optionalReport = useOptionalPromise(report);
  const [internalReport, setInternalReport] = useState(optionalReport);
  const [reportData, setReportData] = useState();
  let t1;
  let t2;
  if ($[0] !== optionalReport || $[1] !== reportId) {
    t1 = async () => {
      await initReportChart(setInternalReport, setReportData, optionalReport, reportId);
    };
    t2 = [optionalReport, reportId];
    $[0] = optionalReport;
    $[1] = reportId;
    $[2] = t1;
    $[3] = t2;
  } else {
    t1 = $[2];
    t2 = $[3];
  }
  useAsyncEffect(t1, t2);
  if (!internalReport?.reportChartSeriesList || internalReport.chartType === void 0 || !reportData) {
    let t3;
    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
      t3 = jsx("div", {
        children: "Loading chart..."
      });
      $[4] = t3;
    } else {
      t3 = $[4];
    }
    return t3;
  }
  let t3;
  if ($[5] !== internalReport.chartType || $[6] !== internalReport.description || $[7] !== internalReport.name || $[8] !== internalReport.reportChartSeriesList || $[9] !== reportData) {
    t3 = jsxs(Card, {
      className: "flex size-full flex-col overflow-hidden",
      children: [jsxs(CardHeader, {
        className: "p-1",
        children: [jsx(CardTitle, {
          className: "truncate text-lg sm:text-xl",
          children: internalReport.name
        }), jsx(CardDescription, {
          className: "line-clamp-2 text-xs sm:text-sm",
          children: internalReport.description
        })]
      }), jsx(CardContent, {
        className: "flex-1 overflow-hidden p-1",
        children: jsx("div", {
          className: "size-full",
          children: jsx(Chart, {
            series: internalReport.reportChartSeriesList,
            data: reportData,
            chartType: internalReport.chartType
          })
        })
      })]
    });
    $[5] = internalReport.chartType;
    $[6] = internalReport.description;
    $[7] = internalReport.name;
    $[8] = internalReport.reportChartSeriesList;
    $[9] = reportData;
    $[10] = t3;
  } else {
    t3 = $[10];
  }
  return t3;
}
__name(ReportChart, "ReportChart");

export { ReportChart };
