import type {Meta} from '@storybook/react';

import {
  ANNOTATIONS_ARGS,
  CHART_STATE_CONTROL_ARGS,
  CONTROLS_ARGS,
  DATA_SERIES_ARGS,
  IS_ANIMATED_ARGS,
  LEGEND_CONTROL_ARGS,
  RENDER_LEGEND_CONTENT_ARGS,
  RENDER_TOOLTIP_DESCRIPTION,
  SKIP_LINK_ARGS,
  THEME_CONTROL_ARGS,
  X_AXIS_OPTIONS_ARGS,
  Y_AXIS_OPTIONS_ARGS,
} from '../../../storybook/constants';
import {PageWithSizingInfo} from '../../Docs/stories';
import {StackedAreaChart} from '../StackedAreaChart';

import {TOOLTIP_CONTENT} from './data';

export const META: Meta = {
  title: 'polaris-viz/Charts/StackedAreaChart',
  component: StackedAreaChart,
  parameters: {
    controls: CONTROLS_ARGS,
    docs: {
      page: PageWithSizingInfo,
      description: {
        component:
          'Used to compare multiple series of data and display the total value. This chart is not ideal for displaying datasets with negatives.',
      },
    },
  },
  decorators: [(Story) => <div style={{height: '500px'}}>{Story()}</div>],
  argTypes: {
    annotations: ANNOTATIONS_ARGS,
    data: DATA_SERIES_ARGS,
    xAxisOptions: X_AXIS_OPTIONS_ARGS,
    isAnimated: IS_ANIMATED_ARGS,
    yAxisOptions: Y_AXIS_OPTIONS_ARGS,
    renderLegendContent: RENDER_LEGEND_CONTENT_ARGS,
    renderTooltipContent: {
      options: Object.keys(TOOLTIP_CONTENT),
      mapping: TOOLTIP_CONTENT,
      description: RENDER_TOOLTIP_DESCRIPTION,
    },
    skipLinkText: SKIP_LINK_ARGS,
    theme: THEME_CONTROL_ARGS,
    state: CHART_STATE_CONTROL_ARGS,
    showLegend: LEGEND_CONTROL_ARGS,
  },
};