import { ReactNode, CSSProperties } from 'react';
import {
  ResponsiveContainerProps,
  XAxisProps,
  YAxisProps,
  CartesianGridProps,
  BarProps,
  LabelListProps
} from 'recharts';

type Data = {
  /**
   * Commonly used as a bar label. This field is used as a key and must be unique.
   */
  name: string;
  /**
   * Value of the bar.
   */
  value: number;
  /**
   * Color of the bar.
   */
  color?: string;
};

type StackOffsetType = 'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette';
type LayoutType = 'horizontal' | 'vertical';
interface Margin {
  top?: number;
  right?: number;
  bottom?: number;
  left?: number;
}

interface BarChartProps {
  width?: number;
  height?: number;
  data?: Data[];
  layout?: LayoutType;
  stackOffset?: StackOffsetType;
  margin?: Margin;
  barCategoryGap?: number | string;
  barGap?: number | string;
  barSize?: number | string;
  maxBarSize?: number;
  style?: CSSProperties;
  className?: string;
  children?: ReactNode;
  defaultShowTooltip?: boolean;
  reverseStackOrder?: boolean;
  id?: string;
}

export type ChartBarProps = {
  ResponsiveContainerProps?: Omit<ResponsiveContainerProps, 'children'>;
  BarChartProps?: Omit<BarChartProps, 'children'>;
  CartesianGridProps?: Omit<CartesianGridProps, 'ref'>;
  XAxisProps?: XAxisProps;
  YAxisProps?: YAxisProps;
  BarProps?: Omit<BarProps, 'ref'>;
  LabelListProps?: LabelListProps<Data>;
};