import type { GlobalTheme } from '../global';

const getChartTheme = (theme: GlobalTheme) => {
  const space = {
    xAxisMarginLeft: theme.space.medium,
    xAxisGridTextMarginTop: theme.space.smallMedium,
    yAxisMarginBottom: theme.space.large,
    yAxisGridMarginTop: theme.space.small,
    yAxisGridTextMarginRight: theme.space.medium,
    headerMarginBottom: theme.space.medium,
  };

  const sizes = {
    xAxisDefaultTextHeight: theme.sizes.xlarge,
    yAxisDefaultTextHeight: theme.sizes.small,
    yAxisDefaultTextWidth: theme.sizes.xlarge,
    defaultWebEmptyStateWidth: theme.sizes['19xlarge'], // Only use for web doc
    defaultWebEmptyStateHeight: theme.sizes.large, // Only use for web doc
  };

  const colors = {
    gridStroke: theme.colors.secondaryOutline,
  };

  return { space, sizes, colors };
};

export default getChartTheme;