import { useMemo } from 'react';
import { useContainerResponsiveValues } from "../../../../hooks/breakpoint/index.js";
export default function useChartSizes(width, singleMode = false) {
  const responsiveValues = useContainerResponsiveValues({
    xxs: {
      line: singleMode ? 20 : 4,
      pointWidth: singleMode ? 20 : 4,
      pointHeight: singleMode ? 8 : 4,
      stroke: singleMode ? 28 : 8,
      background: 12,
      height: singleMode ? 260 : 220,
      quarterTicks: false,
      abbrYears: true
    },
    xs: {
      line: singleMode ? 20 : 4,
      pointWidth: singleMode ? 20 : 4,
      pointHeight: singleMode ? 10 : 4,
      stroke: singleMode ? 28 : 8,
      background: 12,
      height: singleMode ? 346 : 242,
      quarterTicks: true,
      abbrYears: !singleMode
    },
    md: {
      line: singleMode ? 32 : 6,
      pointWidth: singleMode ? 32 : 6,
      pointHeight: singleMode ? 10 : 6,
      stroke: singleMode ? 40 : 10,
      background: 14,
      height: singleMode ? 412 : 288,
      quarterTicks: true,
      abbrYears: false
    },
    lg: {
      line: singleMode ? 32 : 8,
      pointWidth: singleMode ? 32 : 8,
      pointHeight: singleMode ? 10 : 8,
      stroke: singleMode ? 40 : 12,
      background: 16,
      height: singleMode ? 644 : 288,
      quarterTicks: true,
      abbrYears: false
    },
    xl: {
      line: singleMode ? 32 : 10,
      pointWidth: singleMode ? 32 : 10,
      pointHeight: singleMode ? 12 : 10,
      stroke: singleMode ? 40 : 14,
      background: 18,
      height: singleMode ? 644 : 288,
      quarterTicks: true,
      abbrYears: false
    },
    xxl: {
      line: singleMode ? 32 : 10,
      pointWidth: singleMode ? 32 : 10,
      pointHeight: singleMode ? 12 : 10,
      stroke: singleMode ? 40 : 14,
      background: 18,
      height: singleMode ? 644 : 288,
      quarterTicks: true,
      abbrYears: false
    }
  });
  return useMemo(() => ({
    ...responsiveValues,
    width
  }), [width, responsiveValues]);
}