import type {ChartData, ChartOptions, ChartType} from 'chart.js';
import {lazy, Suspense} from 'react';
import {ChartLayout, ChartLayoutProps} from './chart-layout';
import {ChartLoadingIndicator} from '@common/charts/chart-loading-indicator';

const LazyChart = lazy(() => import('./lazy-chart'));

export interface BaseChartProps<Type extends ChartType = ChartType>
  extends Omit<ChartLayoutProps, 'children'> {
  type: Type;
  data: ChartData<Type, unknown>;
  options?: ChartOptions<Type>;
  hideLegend?: boolean;
}
export function BaseChart<Type extends ChartType = ChartType>(
  props: BaseChartProps<Type>
) {
  const {title, description, className, contentRef, isLoading} = props;

  return (
    <ChartLayout
      title={title}
      description={description}
      className={className}
      contentRef={contentRef}
    >
      <Suspense fallback={<ChartLoadingIndicator />}>
        <LazyChart {...props} />
        {isLoading && <ChartLoadingIndicator />}
      </Suspense>
    </ChartLayout>
  );
}