// Only static number props are included for this list
const propNames = ["graphHeight", "labelSize", "labelWidth"] as const;

// This type is needed for smart autocomplete
type PropName = typeof propNames[number];

const mobileBarGraphFactor = 1.25;
const desktopBarGraphFactor = 2;

const mobilePieChartFactor = 1.25;
const desktopPieChartFactor = 3;

const graphWidth = (
  isMobile: boolean,
  pageWidth: number,
  isPieChart: boolean
): number => {
  const mobileFactor = isPieChart ? mobilePieChartFactor : mobileBarGraphFactor;
  const desktopFactor = isPieChart
    ? desktopPieChartFactor
    : desktopBarGraphFactor;
  return isMobile ? pageWidth / mobileFactor : pageWidth / desktopFactor;
};

export const barGraphWidth = (isMobile: boolean, width: number) =>
  graphWidth(isMobile, width, false);

export const pieChartWidth = (isMobile: boolean, width: number) =>
  graphWidth(isMobile, width, true);

export const barGraphMargin = {
  top: 20,
  bottom: 80,
  left: 60,
  right: 20,
};

export const DefaultProp: { [key in PropName]: number } = {
  graphHeight: 500,
  labelSize: 24,
  labelWidth: 100,
};

export const barGraphProps = (isMobile: boolean, pageWidth: number) => {
  return {
    width: barGraphWidth(isMobile, pageWidth),
    height: DefaultProp.graphHeight,
    margin: barGraphMargin,
  };
};

export const pieChartProps = (isMobile: boolean, pageWidth: number) => {
  return {
    width: pieChartWidth(isMobile, pageWidth),
    labelWidth: DefaultProp.labelWidth,
    labelTextSize: DefaultProp.labelSize,
  };
};