import { useMemo } from 'react';

import { useResponsiveQuery } from '../../../foundation/Media';
import { getTextWidth } from '../../../utils/get-text-width';
import { LineChartProps, YDataType } from '../types';
import { useAxisVisible } from './useAxisVisible';

type UseChartMarginParams = {
  axisFontFamily: string;
  axisFontSize: number;
  axisTickPadding: LineChartProps['axisTickPadding'];
  visibleAxis: LineChartProps['visibleAxis'];
  yFormatter: (y: YDataType) => string;
  yS: number[];
};

export const useChartMargin = ({
  visibleAxis = ['left', 'bottom'],
  yS,
  axisTickPadding = 8,
  yFormatter,
  axisFontSize,
  axisFontFamily,
}: UseChartMarginParams): {
  bottom: number;
  left: number;
  right: number;
  top: number;
} => {
  const axisVisible = useAxisVisible(visibleAxis);
  const { isTabletDeviceAndDown } = useResponsiveQuery();
  const yAxisUI = useMemo(() => {
    if ((yS || []).length === 0) {
      return { yMargin: 2 * axisTickPadding };
    }

    const yMargin =
      Math.max(
        ...yS.map((y) =>
          getTextWidth({
            domElement: 'span',
            style: {
              fontFamily: axisFontFamily,
              fontSize: `${axisFontSize}px`,
            },
            text: yFormatter(y),
          }),
        ),
      ) +
      2 * axisTickPadding;
    return { yMargin };
  }, [yFormatter, axisFontFamily, axisTickPadding, axisFontSize, yS]);

  return useMemo(
    () => ({
      bottom: isTabletDeviceAndDown ? 35 : axisVisible.bottom ? axisFontSize * 2 : 0,
      left: axisVisible.left ? yAxisUI.yMargin : 0,
      right: axisVisible.right ? yAxisUI.yMargin : 0,
      top: axisVisible.top ? axisFontSize * 2 : axisFontSize,
    }),
    [axisVisible, yAxisUI.yMargin, axisFontSize],
  );
};