import type { ScaleContinuousNumeric } from 'd3-scale';
import type { RefObject } from 'react';
import { useState } from 'react';

import type { Tick } from './useTicks.js';
import { useTicks } from './useTicks.js';

type Directions = 'horizontal' | 'vertical';

export interface UseLinearPrimaryTicksResult {
  /**
   * The scale used to generate the ticks' position.
   * This is not necessarily the same as the one passed to the hook, and may be
   * the scale passed to a previous call to the hook.
   * If you need to do additional processing with the ticks, for example to
   * compute the position of secondary ticks, you should use this scale, and not
   * the one you passed to the hook.
   */
  scale: ScaleContinuousNumeric<number, number>;
  /**
   * The ticks generated by the hook.
   * The number of ticks account for the space available based on the dom
   * reference passed to the hook, as well as the space required to render the
   * formatted tick labels.
   */
  ticks: Array<Tick<number>>;
}

interface Options {
  tickFormat?: (d: number) => string;
  minSpace?: number;
}

export function useLinearPrimaryTicks(
  scale: ScaleContinuousNumeric<number, number>,
  direction: Directions,
  ref: RefObject<SVGGElement | null>,
  options: Options = {},
): UseLinearPrimaryTicksResult {
  const [ticks, setTicks] = useState<UseLinearPrimaryTicksResult>(() => ({
    ticks: [],
    scale,
  }));
  const { tickFormat = String } = options;
  useTicks<number>(scale, direction, ref, { ...options, tickFormat, setTicks });
  return ticks;
}