export default <T extends object>(
  { startValue, endValue, onFinish }: TransitionOptions<T>,
  onUpdate: Callback<T>,
) => {
  const interp = interpolate(startValue, endValue);
  onUpdate(interp(0));
  onUpdate(interp(0.5));
  onUpdate(interp(1));
  onFinish();
};

function animateOnce(fromValue: any, toValue: any, durationMs: number, onFrame: (t: number) => void) {
  const interpolator = d3Interpolate.interpolate(fromValue, toValue);
  const frameCount = Math.ceil(durationMs / 1000 * ANIMATION_FRAMERATE);

  let frame = 1;
  const setIntervalId = setInterval(() => {
    onFrame(interpolator(d3Ease.easeCubicInOut(frame / frameCount)));
    if (frame === frameCount) {
      clearInterval(setIntervalId);
    }
    frame++;
  }, durationMs / frameCount);

  return () => { clearInterval(setIntervalId); };
}

    improviseGradientFromShorter(shortColors: Color[], numColors: number): Color[] {
        const newColors = clone(shortColors)

        while (newColors.length < numColors) {
            for (let i = newColors.length - 1; i > 0; i -= 1) {
                const startColor = rgb(newColors[i - 1])
                const endColor = rgb(newColors[i])
                const newColor = interpolate(startColor, endColor)(0.5)
                newColors.splice(i, 0, newColor)

                if (newColors.length >= numColors) break
            }
        }

        return newColors
    }

function interpolateArray(scaleArr: string[]) {
    const N = scaleArr.length - 2 // -1 for spacings, -1 for number of interpolate fns
    const intervalWidth = 1 / N
    const intervals: Array<(t: number) => string> = []

    for (let i = 0; i <= N; i++) {
        intervals[i] = interpolate(rgb(scaleArr[i]), rgb(scaleArr[i + 1]))
    }

    return (t: number) => {
        if (t < 0 || t > 1) throw new Error('Outside the allowed range of [0, 1]')

        const i = Math.floor(t * N)
        const intervalOffset = i * intervalWidth

        return intervals[i](t / intervalWidth - intervalOffset / intervalWidth)
    }
}

/**
 * An animation function based on d3's interpolate.
 * @returns an cancel() function
 */
export default function transition<T extends object>(
  options: TransitionOptions<T>,
  updateCallback: Callback<T>,
) {
  const {
    startValue,
    endValue,
    // Duration, in milliseconds
    duration,
    ease = 'easePolyInOut',
    onFinish = _.noop,
  } = options;
  let start = 0;
  const id: { current?: number } = {};
  // Adapted from:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  const interp = interpolate(startValue, endValue);
  const step = (timestamp: number) => {
    if (!start) {
      start = timestamp;
    }
    const delta = timestamp - start;
    const progress = Math.min(delta / duration, 1);
    const currentValue = interp(d3[ease](progress));
    updateCallback(currentValue);
    if (delta < duration) {
      id.current = requestAnimationFrame(step);
    } else {
      onFinish();
    }
  };
  id.current = requestAnimationFrame(step);
  return {
    cancel() {
      cancelAnimationFrame(id.current!);
    },
  };
}

    iKeyVal: Interpolator<{ [key: string]: any }>,
    iRGBColorObj: Interpolator<d3Color.RGBColor>,
    iZoom: d3Interpolate.ZoomInterpolator;

let num: number,
    str: string,
    arrNum: number[],
    arrStr: string[],
    objKeyVal: { [key: string]: any },
    objRGBColor: d3Color.RGBColor,
    objHSVColor: d3Hsv.HSVColor,
    zoom: [number, number, number];

// test interpolate(a, b) signature ----------------------------------------------------

iNum = d3Interpolate.interpolate('1', 5);


// color interpolator returning a color string
iString = d3Interpolate.interpolate('seagreen', d3Color.rgb(100, 100, 100));
iString = d3Interpolate.interpolate('seagreen', d3Hsv.hsv(60, 1, 0.2, 0.4));
iString = d3Interpolate.interpolate('seagreen', 'steelblue'); // as used with valid color name string

// date interpolator
iDate = d3Interpolate.interpolate(new Date(2016, 6, 1), new Date(2016, 6, 31));

// regular string interpolator interpolating number strings (as the strings are not valid color strings)
iString = d3Interpolate.interpolate(1, '5');
iString = d3Interpolate.interpolate('a: 1', 'a: 5');
iString = d3Interpolate.interpolate(new StringCoercible('a: 1'), 'a: 5');

 return (d: any) => {
   const interpolator = interpolate(start, target);
   return (t) => {
     return this.arcGenerator(interpolator(t));
   }
 };

let iRGBColorObj: Interpolator<d3Color.RGBColor>;
let iZoom: d3Interpolate.ZoomInterpolator;

let num: number;
let str: string;
let arrNum: number[];
let arrStr: string[];
let objKeyVal: { [key: string]: any };
let xyz: Xyz;
let objRGBColor: d3Color.RGBColor;
let zoom: [number, number, number];

// test interpolate(a, b) signature ----------------------------------------------------

// $ExpectError
iNum = d3Interpolate.interpolate('1', 5); // fails, https://github.com/Microsoft/TypeScript/issues/4002#issuecomment-124201510

// null and boolean interpolator
iNull = d3Interpolate.interpolate(null, null);
iNull = d3Interpolate.interpolate(10, null);
iBoolean = d3Interpolate.interpolate(false, true);
iBoolean = d3Interpolate.interpolate("10", true);

// color interpolator returning a color string
iString = d3Interpolate.interpolate('seagreen', d3Color.rgb(100, 100, 100));
iString = d3Interpolate.interpolate('seagreen', d3Hsv.hsv(60, 1, 0.2, 0.4));
iString = d3Interpolate.interpolate('seagreen', 'steelblue'); // as used with valid color name string

// date interpolator
iDate = d3Interpolate.interpolate(new Date(2016, 6, 1), new Date(2016, 6, 31));