import ParentSize, {
  ParentSizeProps,
} from '@visx/responsive/lib/components/ParentSizeModern';

import './ChartContainer.css';

type Omitter<A, B> = Omit<A, keyof B> & B;

type ContainerProps = {
  width?: number | string;
  height?: number | string;
};

export type WithContainerProps<T> = Omitter<T, ContainerProps>;
export type WithLegendContainerProps<T> = Omitter<T, ContainerProps> &
  LegendProps<Omitter<T, ContainerProps>>;
// export type WithLegendContainerProps<T extends Omitter<T, ContainerProps>> = T &
//   LegendProps<T>;

export type LegendPlacement = 'top' | 'bottom' | 'hidden';

export type LegendProps<P> = {
  legendPlacement?: LegendPlacement;
  legendComponent?: ((props: P) => JSX.Element) | null;
};

interface ChartContainerProps {
  chart: ParentSizeProps['children'];
  rowGap?: number;
  legendPlacement?: LegendPlacement;
  legendComponent?: JSX.Element;
}

export const ChartContainer = ({
  chart,
  rowGap = 16,
  legendPlacement = 'bottom',
  legendComponent,
}: ChartContainerProps) => {
  const containerClassName = [
    'chart-grid',
    `chart-grid__legend--${legendPlacement}`,
  ].join(' ');

  const showLegend = legendPlacement && legendPlacement !== 'hidden';

  const style = legendComponent ? { rowGap } : undefined;

  return (
    <div className={containerClassName} style={style}>
      {chart && (
        <div className="chart-graph">
          <ParentSize
          // className={className}
          // parentSizeStyles={style}
          >
            {chart}
          </ParentSize>
        </div>
      )}
      {legendComponent && showLegend && (
        <div className="chart-legend">{legendComponent}</div>
      )}
    </div>
  );
};