import React, { useEffect, useMemo, useRef, useState } from "react";
import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
import { toast } from "sonner";
import { LogType, Widget } from "@onvo-ai/js";
import {
  ArrowsRightLeftIcon,
  DocumentChartBarIcon,
  DocumentDuplicateIcon,
  PencilSquareIcon,
  PhotoIcon,
  TrashIcon,
} from "@heroicons/react/24/outline";

import ChartBase from "./ChartBase";
import { Card } from "../../tremor/Card";
import { Icon } from "../../tremor/Icon";
import { useDashboard } from "../../layouts/Dashboard/useDashboard";
import { useBackend } from "../../layouts/Wrapper";
import Skeletons from "../Skeletons";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuIconWrapper,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuSubMenu,
  DropdownMenuSubMenuContent,
  DropdownMenuSubMenuTrigger,
  DropdownMenuTrigger,
} from "../../tremor/DropdownMenu";
import { useTextWidgetModal } from "../TextWidgetModal";
import { useImageWidgetModal } from "../ImageWidgetModal";
import { useEditWidgetModal } from "../EditWidgetModal";
import { useTheme } from "../../layouts/Dashboard/useTheme";
import { ExclamationTriangleIcon } from "@heroicons/react/16/solid";
import { waitForJob } from "../../lib/waitForJob";
import { SortDirection } from "react-data-grid";
import { usePagination } from "./usePagination";
import { PaginationComponent } from "./PaginationComponent";

const DragHandle = () => {
  return (
    <div className="onvo-absolute -onvo-top-6 onvo-w-10 onvo-h-6 onvo-z-10 onvo-hidden group-hover/chartcard:onvo-flex onvo-transition-all onvo-left-[50%] -onvo-ml-5 onvo-justify-center onvo-items-center onvo-foreground-color onvo-border-solid onvo-border onvo-border-b-0 onvo-border-black/5 dark:onvo-border-white/10 onvo-rounded-t-md">
      <div className="onvo-chart-card-drag-handle  onvo-absolute onvo-grid-cols-4 onvo-py-1 onvo-cursor-move onvo-grid onvo-px-1 onvo-items-center onvo-justify-center onvo-h-6 onvo-w-10">
        <div className="onvo-h-[3px] onvo-w-[3px] onvo-ml-0.5 onvo-rounded-full onvo-bg-black/20 dark:onvo-bg-white/20"></div>
        <div className="onvo-h-[3px] onvo-w-[3px] onvo-ml-0.5 onvo-rounded-full onvo-bg-black/20 dark:onvo-bg-white/20"></div>
        <div className="onvo-h-[3px] onvo-w-[3px] onvo-ml-0.5 onvo-rounded-full onvo-bg-black/20 dark:onvo-bg-white/20"></div>
        <div className="onvo-h-[3px] onvo-w-[3px] onvo-ml-0.5 onvo-rounded-full onvo-bg-black/20 dark:onvo-bg-white/20"></div>
        <div className="onvo-h-[3px] onvo-w-[3px] onvo-ml-0.5 onvo-rounded-full onvo-bg-black/20 dark:onvo-bg-white/20"></div>
        <div className="onvo-h-[3px] onvo-w-[3px] onvo-ml-0.5 onvo-rounded-full onvo-bg-black/20 dark:onvo-bg-white/20"></div>
        <div className="onvo-h-[3px] onvo-w-[3px] onvo-ml-0.5 onvo-rounded-full onvo-bg-black/20 dark:onvo-bg-white/20"></div>
        <div className="onvo-h-[3px] onvo-w-[3px] onvo-ml-0.5 onvo-rounded-full onvo-bg-black/20 dark:onvo-bg-white/20"></div>
      </div></div>
  );
};

const ChartCard: React.FC<{
  widget: Widget;
  className?: string;
  hideOptions?: boolean;
  footer?: React.ReactNode;
}> = ({ widget, className, footer, hideOptions }) => {
  const { dashboard, refreshWidgets, tab, queue } = useDashboard();
  const { setOpen: setEditModalOpen } = useEditWidgetModal();
  const { setOpen: setTextModalOpen } = useTextWidgetModal();
  const { setOpen: setImageModalOpen } = useImageWidgetModal();
  const { backend, adminMode, containerRef } = useBackend();
  const theme = useTheme();
  const cardRef = useRef(null);
  const [cache, setCache] = useState<any>(null);

  // Use pagination store
  const {
    pagination,
    setStats,
    stats,
    setPagination,
    resetPagination
  } = usePagination();



  const duplicate = async () => {
    let newObj: any = { ...widget };
    delete newObj.id;

    if (!backend) return;
    toast.promise(
      async () => {
        let wid = await backend.widgets.create(newObj);
        let data = await backend.widget(wid.id).updateCache();

        await waitForJob(data._meta.url);
        return wid;
      },
      {
        loading: "Duplicating widget...",
        success: (newWidget) => {
          refreshWidgets(backend);
          backend.logs.create({
            type: LogType.CreateWidget,
            dashboard: widget.dashboard,
            widget: newWidget.id,
          })

          return "Widget duplicated";
        },
        error: (error) => "Error duplicating widget: " + error.message,
      }
    );
  };

  const moveTab = async (newTab: number) => {
    let newObj: any = { ...widget, tab: newTab };

    if (!backend) return;
    toast.promise(
      () => {
        return backend.widgets.update(widget.id, newObj) as Promise<any>;
      },
      {
        loading: "Moving widget...",
        success: (newWidget) => {
          refreshWidgets(backend);

          return "Widget moved";
        },
        error: (error) => "Error moving widget: " + error.message,
      }
    );
  };

  const deleteWidget = async () => {
    if (!backend) return;
    toast.promise(
      () => {
        return backend.widgets.delete(widget.id);
      },
      {
        loading: "Deleting widget...",
        success: () => {
          backend.logs.create({
            type: LogType.DeleteWidget,
            dashboard: widget.dashboard
          });
          refreshWidgets(backend);
          return "Widget deleted";
        },
        error: (error) => "Error deleting widget: " + error.message,
      }
    );
  };

  const exportWidget = (format: "svg" | "png" | "csv" | "xlsx" | "jpeg") => {
    if (!backend) return;
    toast.promise(
      () => {
        return backend.widget(widget.id).export(format, theme);
      },
      {
        loading: `Exporting widget as ${format}...`,
        success: (blob) => {
          // @ts-ignore
          let blobUrl = window.URL.createObjectURL(blob);
          let a = document.createElement("a");
          a.download = widget.title + "." + format;
          a.href = blobUrl;
          document.body.appendChild(a);
          a.click();
          a.remove();
          return "Widget exported";
        },
        error: (error) => "Error exporting widget: " + error.message,
      }
    );
  };

  // Function to fetch paginated data from server
  const fetchPaginatedData = async (page: number, size: number, column?: string, direction?: SortDirection) => {
    if (!backend || !widget) return;
    try {
      // Fetch paginated data from server
      const { data, pagination: paginationData } = await queue.add(() => backend.widget(widget.id).cache({
        page,
        pageSize: size,
        sortField: column,
        sortDirection: direction === "DESC" ? "desc" : "asc"
      }));

      setCache(data);
      // Update cache with paginated data
      if (paginationData) {
        // Update pagination metadata
        setStats({
          totalRows: paginationData.totalRows || 0,
          totalPages: paginationData.totalPages || 1
        });
      }
    } catch (error) {
      console.error("Error fetching paginated data:", error);
    }
  };

  // Handle sort change from pagination store
  const updatePagination = (newPagination: any) => {
    if (!newPagination) return;
    fetchPaginatedData(pagination.currentPage, pagination.pageSize, pagination.sortColumn || undefined, pagination.sortDirection || undefined);
    setPagination(newPagination);
  };

  useEffect(() => {
    if (!widget || !backend) return;

    // Function to fetch cache from server
    const fetchServerCache = async () => {
      if (!backend) return null;
      try {
        const { data: cacheData } = await queue.add(() => backend.widget(widget.id).cache());

        // Update component state
        setCache(cacheData);
      } catch (error) {
        console.error("Error fetching widget cache from server:", error);
      }
    };

    // Fetch data from server
    fetchServerCache();

    // Reset pagination when widget changes
    return () => {
      resetPagination();
    };
  }, [widget, backend]);


  const layout_editable =
    adminMode || dashboard?.settings?.can_edit_widget_layout;
  const widget_editable = adminMode || dashboard?.settings?.can_edit_widgets;
  const addable = adminMode || dashboard?.settings?.can_create_widgets;
  const deletable = adminMode || dashboard?.settings?.can_delete_widgets;

  const ImageDownloadEnabled = useMemo(() => {
    if (adminMode) return true;
    if (dashboard?.settings && dashboard.settings.disable_download_images)
      return false;
    return true;
  }, [dashboard, widget, adminMode]);

  const ReportDownloadEnabled = useMemo(() => {
    if (adminMode) return true;
    if (dashboard?.settings && dashboard.settings.disable_download_reports)
      return false;
    return true;
  }, [dashboard, widget, adminMode]);

  const error = useMemo(() => {
    if (widget && widget.error && widget_editable) {
      return (
        <div onClick={() =>
          setEditModalOpen(true, widget)} className="onvo-absolute onvo-right-4 onvo-bottom-4 onvo-rounded-full onvo-shadow-lg onvo-foreground-color onvo-z-10 onvo-border onvo-border-black/5 dark:onvo-border-white/10">
          <div className="onvo-flex onvo-cursor-pointer onvo-items-center onvo-justify-center onvo-size-10">
            <ExclamationTriangleIcon className="onvo-text-red-500 onvo-size-5" />
          </div>
        </div>)

    }
    return <></>;
  }, [widget]);

  const Skeleton = useMemo(() => Skeletons(widget.type), [widget]);

  const moveDropdown = useMemo(() => {
    if ((dashboard?.tabs || []).filter(a => !a.hidden).length <= 1) {
      return <></>;
    }
    return (<DropdownMenuSubMenu>
      <DropdownMenuSubMenuTrigger>
        <span className="onvo-flex onvo-items-center onvo-gap-x-2">
          <ArrowsRightLeftIcon className="onvo-size-4" />
          <span>Move widget</span>
        </span>
      </DropdownMenuSubMenuTrigger>
      <DropdownMenuSubMenuContent className="!onvo-bg-transparent onvo-backdrop-blur-lg">
        <div className="onvo-w-full onvo-absolute onvo-top-0 onvo-left-0 onvo-right-0 onvo-bottom-0 onvo-foreground-color onvo-opacity-50 onvo-rounded-lg -onvo-z-10"></div>
        {dashboard?.tabs.map(a => (

          <DropdownMenuItem key={a.id} onClick={() => moveTab(a.id)}>
            <span className="onvo-flex onvo-items-center onvo-gap-x-2">
              <span>{a.label}</span>
            </span>
          </DropdownMenuItem>
        ))}

      </DropdownMenuSubMenuContent>
    </DropdownMenuSubMenu>)

  }, [tab, dashboard]);


  const border_radius = useMemo(() => {
    return dashboard?.settings?.widget_border_radius === undefined
      ? 16
      : dashboard?.settings?.widget_border_radius;
  }, [dashboard]);



  if (widget.type === "divider") {
    return (
      <div ref={cardRef}
        className={
          "onvo-group/chartcard onvo-relative onvo-h-full onvo-w-full onvo-py-0 !onvo-bg-transparent !onvo-border-0 !onvo-ring-0 !onvo-shadow-none onvo-px-0 " +
          (className || "")
        }
      >
        {layout_editable && !hideOptions && <DragHandle />}
        {deletable && !hideOptions && (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Icon
                className="!onvo-rounded-full onvo-z-20 group-hover/chartcard:onvo-opacity-100 onvo-transition-all onvo-opacity-0  onvo-cursor-pointer onvo-font-override onvo-absolute onvo-top-1 onvo-right-1"
                icon={EllipsisVerticalIcon}
                variant="shadow"
              />
            </DropdownMenuTrigger>
            <DropdownMenuContent container={containerRef?.current} className="!onvo-backdrop-blur-lg onvo-min-w-56 onvo-z-50">

              <div className="onvo-w-full onvo-absolute onvo-top-0 onvo-left-0 onvo-right-0 onvo-bottom-0 onvo-foreground-color onvo-opacity-50 onvo-rounded-lg -onvo-z-10"></div>
              {deletable && (
                <DropdownMenuGroup>
                  <DropdownMenuItem onClick={deleteWidget}>
                    <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                      <TrashIcon className="onvo-size-4 onvo-text-red-500" />
                      <span className="onvo-text-red-500">Delete widget</span>
                    </span>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              )}
            </DropdownMenuContent>
          </DropdownMenu>
        )}
        <ChartBase json={cache} title="" />
        {footer}
      </div>
    );
  }
  if (widget.type === "text") {
    let config = (widget.config as any);
    let sub = config?.options?.plugins?.subtitle.text || "";
    if (typeof sub !== "string") {
      sub = sub.join("<br />");
    }
    return (
      <div ref={cardRef}
        className={
          "onvo-group/chartcard onvo-relative onvo-h-full onvo-w-full onvo-py-0 !onvo-bg-transparent !onvo-border-0 !onvo-ring-0 !onvo-shadow-none onvo-px-0 " +
          (className || "")
        }
      >
        {layout_editable && !hideOptions && <DragHandle />}
        {(widget_editable || deletable) && !hideOptions && (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Icon
                className="!onvo-rounded-full onvo-z-20 group-hover/chartcard:onvo-opacity-100 onvo-transition-all onvo-opacity-0 onvo-cursor-pointer onvo-font-override onvo-absolute onvo-top-1 onvo-right-1"
                icon={EllipsisVerticalIcon}
                variant="shadow"
              />
            </DropdownMenuTrigger>
            <DropdownMenuContent container={containerRef?.current} className="onvo-backdrop-blur-lg onvo-min-w-56 onvo-z-50">
              <div className="onvo-w-full onvo-absolute onvo-top-0 onvo-left-0 onvo-right-0 onvo-bottom-0 onvo-foreground-color onvo-opacity-50 onvo-rounded-lg -onvo-z-10"></div>
              {widget_editable && (
                <DropdownMenuGroup>
                  <DropdownMenuItem
                    onClick={() => {
                      setTimeout(() => {
                        setTextModalOpen(true, {
                          id: widget.id,
                          title: widget.title,
                          subtitle: sub,
                          prompt: config?.options.plugins.text.prompt,
                          titleAlignment:
                            config?.options.plugins?.title?.align || "start",
                          descriptionAlignment:
                            config?.options.plugins?.subtitle?.align || "start",
                        });
                      }, 30);
                    }}
                  >
                    <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                      <PencilSquareIcon className="onvo-size-4" />
                      <span>Edit widget</span>
                    </span>
                  </DropdownMenuItem>

                  {moveDropdown}
                </DropdownMenuGroup>
              )}
              {widget_editable && deletable && <DropdownMenuSeparator />}
              {deletable && (
                <DropdownMenuGroup>
                  <DropdownMenuItem onClick={deleteWidget}>
                    <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                      <TrashIcon className="onvo-size-4 onvo-text-red-500" />
                      <span className="onvo-text-red-500">Delete widget</span>
                    </span>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              )}
            </DropdownMenuContent>
          </DropdownMenu>
        )}
        <ChartBase json={cache} title={widget.title} />
        {footer}
      </div>
    );
  }

  if (widget.type === "image") {
    return (
      <div ref={cardRef}
        className={
          `onvo-chart-card onvo-group/chartcard onvo-transition-all onvo-relative onvo-h-full onvo-w-full onvo-py-0 !onvo-bg-transparent !onvo-border-0 !onvo-ring-0 !onvo-shadow-none onvo-px-0 ` +
          (className || "")
        }
        style={{
          borderRadius: border_radius + "px"
        }}
      >
        {layout_editable && !hideOptions && <DragHandle />}
        {(widget_editable || deletable) && !hideOptions && (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Icon
                className="!onvo-rounded-full onvo-z-20 group-hover/chartcard:onvo-opacity-100 onvo-opacity-0 onvo-cursor-pointer onvo-font-override onvo-absolute onvo-top-1 onvo-right-1"
                icon={EllipsisVerticalIcon}
                variant="shadow"
              />
            </DropdownMenuTrigger>
            <DropdownMenuContent container={containerRef?.current} className="onvo-backdrop-blur-lg onvo-min-w-56 onvo-z-50">
              <div className="onvo-w-full onvo-absolute onvo-top-0 onvo-left-0 onvo-right-0 onvo-bottom-0 onvo-foreground-color onvo-opacity-50 onvo-rounded-lg -onvo-z-10"></div>
              {widget_editable && (
                <DropdownMenuGroup>
                  <DropdownMenuItem
                    onClick={() => {
                      setTimeout(() => {
                        setImageModalOpen(true, {
                          id: widget.id,
                          url: (widget.config as any)?.options.plugins?.image?.url || "",
                          imageFill:
                            (widget.config as any)?.options.plugins?.image?.fill || "fill",
                        });
                      }, 30);
                    }}
                  >
                    <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                      <PencilSquareIcon className="onvo-size-4" />
                      <span>Edit widget</span>
                    </span>
                  </DropdownMenuItem>

                  {moveDropdown}
                </DropdownMenuGroup>
              )}
              {widget_editable && deletable && <DropdownMenuSeparator />}
              {deletable && (
                <DropdownMenuGroup>
                  <DropdownMenuItem onClick={deleteWidget}>
                    <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                      <TrashIcon className="onvo-size-4 onvo-text-red-500" />
                      <span className="onvo-text-red-500">Delete widget</span>
                    </span>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              )}
            </DropdownMenuContent>
          </DropdownMenu>
        )}
        <ChartBase json={cache} title={""} />
        {footer}
      </div>
    );
  }


  const paginationEnabled = widget.engine === "manual-v1" && widget.type === "table";
  return (
    <Card
      ref={cardRef}
      key={widget.id}
      id={widget.settings?.css_id}
      className={
        "onvo-chart-card onvo-h-full onvo-group/chartcard onvo-foreground-color onvo-relative onvo-flex onvo-flex-col !onvo-p-0 " +
        (className || "") +
        " " +
        (widget.settings?.css_classnames ? widget.settings?.css_classnames : "")
      }
      style={{
        borderRadius: border_radius + "px"
      }}
    >
      {error}
      {layout_editable && !hideOptions && <DragHandle />}

      {(addable ||
        deletable ||
        widget_editable ||
        ImageDownloadEnabled ||
        ReportDownloadEnabled) &&
        !hideOptions && (
          <DropdownMenu modal={false}>
            <DropdownMenuTrigger asChild>
              <Icon
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                }}
                onMouseDown={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                }}
                onMouseUp={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                }}
                className="!onvo-rounded-full onvo-z-20 onvo-transition-all group-hover/chartcard:onvo-opacity-100 onvo-opacity-0 onvo-cursor-pointer !onvo-text-gray-500 onvo-absolute onvo-top-1 onvo-right-1"
                icon={EllipsisVerticalIcon}
                variant="shadow"
              />
            </DropdownMenuTrigger>
            <DropdownMenuContent container={containerRef?.current} className="onvo-min-w-56 onvo-backdrop-blur-lg onvo-border-black/10 dark:onvo-border-white/10 onvo-z-50">
              <div className="onvo-w-full onvo-absolute onvo-top-0 onvo-left-0 onvo-right-0 onvo-bottom-0 onvo-foreground-color onvo-opacity-50 onvo-rounded-lg -onvo-z-10"></div>
              {(addable || widget_editable) && (
                <>
                  <DropdownMenuLabel>Edit widget</DropdownMenuLabel>
                  <DropdownMenuGroup>
                    {widget_editable && (
                      <>
                        <DropdownMenuItem
                          onClick={() => {

                            setEditModalOpen(true, widget);
                          }}
                        >
                          <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                            <PencilSquareIcon className="onvo-size-4" />
                            <span>Edit widget</span>
                          </span>
                        </DropdownMenuItem>
                        {moveDropdown}</>
                    )}
                    {addable && (
                      <DropdownMenuItem onClick={duplicate}>
                        <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                          <DropdownMenuIconWrapper>
                            <DocumentDuplicateIcon className="onvo-size-4" />
                          </DropdownMenuIconWrapper>
                          <span>Duplicate widget</span>
                        </span>
                      </DropdownMenuItem>
                    )}
                  </DropdownMenuGroup>
                </>
              )}

              {(addable || widget_editable) && ReportDownloadEnabled && (
                <DropdownMenuSeparator className="onvo-border-black/10 dark:onvo-border-white/10" />
              )}
              {ReportDownloadEnabled && (
                <>
                  <DropdownMenuLabel>Download reports</DropdownMenuLabel>
                  <DropdownMenuGroup>
                    <DropdownMenuItem onClick={() => exportWidget("xlsx")}>
                      <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                        <DocumentChartBarIcon className="onvo-size-4" />
                        <span>Download as excel</span>
                      </span>
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => exportWidget("csv")}>
                      <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                        <DropdownMenuIconWrapper>
                          <DocumentChartBarIcon className="onvo-size-4" />
                        </DropdownMenuIconWrapper>
                        <span>Download as CSV</span>
                      </span>
                    </DropdownMenuItem>
                  </DropdownMenuGroup>
                </>
              )}
              {(addable || widget_editable || ReportDownloadEnabled) &&
                ImageDownloadEnabled && <DropdownMenuSeparator className="onvo-border-black/10 dark:onvo-border-white/10" />}
              {ImageDownloadEnabled && (
                <>
                  <DropdownMenuLabel>Download images</DropdownMenuLabel>
                  <DropdownMenuGroup>
                    <DropdownMenuItem onClick={() => exportWidget("svg")}>
                      <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                        <PhotoIcon className="onvo-size-4" />
                        <span>Download as SVG</span>
                      </span>
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => exportWidget("png")}>
                      <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                        <DropdownMenuIconWrapper>
                          <PhotoIcon className="onvo-size-4" />
                        </DropdownMenuIconWrapper>
                        <span>Download as PNG</span>
                      </span>
                    </DropdownMenuItem>
                    <DropdownMenuItem onClick={() => exportWidget("jpeg")}>
                      <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                        <DropdownMenuIconWrapper>
                          <PhotoIcon className="onvo-size-4" />
                        </DropdownMenuIconWrapper>
                        <span>Download as JPEG</span>
                      </span>
                    </DropdownMenuItem>
                  </DropdownMenuGroup>
                </>
              )}

              {(addable ||
                widget_editable ||
                ImageDownloadEnabled ||
                ReportDownloadEnabled) &&
                deletable && <DropdownMenuSeparator className="onvo-border-black/10 dark:onvo-border-white/10" />}

              {deletable && (
                <DropdownMenuGroup>
                  <DropdownMenuItem onClick={deleteWidget}>
                    <span className="onvo-flex onvo-items-center onvo-gap-x-2">
                      <TrashIcon className="onvo-size-4 onvo-text-red-500" />
                      <span className="onvo-text-red-500">Delete widget</span>
                    </span>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              )}
            </DropdownMenuContent>
          </DropdownMenu>
        )}
      {!cache && (
        <Skeleton />
      )}
      {cache && (
        <div className={"onvo-p-0 onvo-flex-grow onvo-w-full onvo-flex onvo-flex-col " + (footer ? "onvo-max-h-[calc(100%-48px)]" : paginationEnabled ? "onvo-max-h-[calc(100%-40px)]" : "onvo-max-h-full")}>
          <ChartBase
            json={cache}
            title={widget.title}
            pagination={pagination}
            stats={stats}
            setPagination={updatePagination}
            padding={(typeof dashboard?.settings?.widget_padding === "number") ? dashboard?.settings?.widget_padding : 20}
          />
        </div>)}
      {footer}

      {paginationEnabled && (
        <PaginationComponent
          pagination={pagination}
          stats={{ totalRows: stats?.totalRows || 0, totalPages: stats?.totalPages || 1 }}
          setPagination={updatePagination}
          padding={(typeof dashboard?.settings?.widget_padding === "number") ? dashboard?.settings?.widget_padding : 20}
        />)}
    </Card>
  );
};

export default ChartCard;