import { Tooltip, TooltipData } from '../../common/Tooltip';
import {
  ChartContainer,
  WithContainerProps,
} from '../../common/ChartContainer';

import AreaChartSVG, { AreaChartSVGProps } from './AreaChartSVG';
import { useTooltip } from '../../hooks/useTooltip';

interface AreaChartWithTooltipProps extends Omit<AreaChartSVGProps, 'onHover'> {
  showTooltip?: boolean;
  tooltipComponent?: (data: TooltipData) => JSX.Element;
}

export const AreaChartWithTooltip = (props: AreaChartWithTooltipProps) => {
  const { showTooltip, tooltipComponent, ...chartProps } = props;
  const { setTooltip, renderTooltip } = useTooltip(Boolean(showTooltip));

  return (
    <>
      <AreaChartSVG
        onHover={showTooltip ? setTooltip : undefined}
        {...chartProps}
      />
      {renderTooltip(tooltipComponent)}
    </>
  );
};

AreaChartWithTooltip.defaultProps = {
  showTooltip: true,
  tooltipComponent: (data) => <Tooltip data={data} />,
} as Partial<AreaChartWithTooltipProps>;

type AreaChartProps = WithContainerProps<AreaChartWithTooltipProps>;

export const AreaChart = (props: AreaChartProps) => {
  return (
    <ChartContainer
      chart={({ width, height }) => {
        if (width === 0 || height === 0) return null;
        const chartProps = Object.assign({}, { width, height }, props);
        return <AreaChartWithTooltip {...chartProps} />;
      }}
    />
  );
};