export const PAGE_SCROLL_ANIMATION_MS = 150;
export const PAGE_SCROLL_ACCELERATION_MS = 400;
export const PAGE_SCROLL_MAX_MULTIPLIER = 2;

const PAGE_SCROLL_ALIGNMENT_OFFSET_PX = 36;
const PAGE_SCROLL_BOUNDARY_EPSILON_PX = 1;
const PAGE_SCROLL_HOLD_DELAY_MS = PAGE_SCROLL_ANIMATION_MS;

export type PageScrollKey = "PageUp" | "PageDown";

type PageScrollMetrics = {
  clientHeight: number;
  scrollHeight: number;
  scrollTop: number;
};

function canScrollInDirection(
  { clientHeight, scrollHeight, scrollTop }: PageScrollMetrics,
  key: PageScrollKey,
): boolean {
  const maxScrollTop = Math.max(0, scrollHeight - clientHeight);
  const clampedScrollTop = Math.min(maxScrollTop, Math.max(0, scrollTop));
  return key === "PageUp"
    ? clampedScrollTop > PAGE_SCROLL_BOUNDARY_EPSILON_PX
    : clampedScrollTop < maxScrollTop - PAGE_SCROLL_BOUNDARY_EPSILON_PX;
}

export function getTimelinePageScrollKey({
  altKey,
  clientHeight,
  ctrlKey,
  defaultPrevented,
  isComposing,
  key,
  keyCode,
  metaKey,
  scrollHeight,
  scrollTop,
  shiftKey,
}: {
  altKey: boolean;
  clientHeight: number;
  ctrlKey: boolean;
  defaultPrevented: boolean;
  isComposing: boolean;
  key: string;
  keyCode: number;
  metaKey: boolean;
  scrollHeight: number;
  scrollTop: number;
  shiftKey: boolean;
}): PageScrollKey | null {
  if (key !== "PageUp" && key !== "PageDown") {
    return null;
  }
  if (
    defaultPrevented ||
    isComposing ||
    keyCode === 229 ||
    altKey ||
    ctrlKey ||
    metaKey ||
    shiftKey
  ) {
    return null;
  }

  const editorCanScroll = canScrollInDirection({ clientHeight, scrollHeight, scrollTop }, key);
  return editorCanScroll ? null : key;
}

type PageScrollContainer = PageScrollMetrics & {
  getBoundingClientRect: () => {
    height: number;
  };
};

type PageScrollEnv = {
  now: () => number;
  requestAnimationFrame: (callback: FrameRequestCallback) => number;
  cancelAnimationFrame: (handle: number) => void;
  setTimeout: (callback: () => void, delay: number) => number;
  clearTimeout: (handle: number) => void;
};

function getDefaultEnv(): PageScrollEnv {
  return {
    now: () => performance.now(),
    requestAnimationFrame: (callback) => window.requestAnimationFrame(callback),
    cancelAnimationFrame: (handle) => window.cancelAnimationFrame(handle),
    setTimeout: (callback, delay) => window.setTimeout(callback, delay),
    clearTimeout: (handle) => window.clearTimeout(handle),
  };
}

export function getPageScrollMultiplier(holdElapsedMs: number): number {
  const progress = Math.max(0, holdElapsedMs) / PAGE_SCROLL_ACCELERATION_MS;
  return 1 + Math.min(progress, 1) * (PAGE_SCROLL_MAX_MULTIPLIER - 1);
}

export function getPageScrollVelocityPxPerMs({
  holdElapsedMs,
  pageScrollDistancePx,
}: {
  holdElapsedMs: number;
  pageScrollDistancePx: number;
}): number {
  return (pageScrollDistancePx * getPageScrollMultiplier(holdElapsedMs)) / PAGE_SCROLL_ANIMATION_MS;
}

export function getPageScrollDistancePx({
  containerHeightPx,
  scrollPaddingBottomPx,
}: {
  containerHeightPx: number;
  scrollPaddingBottomPx: number;
}): number {
  return Math.max(0, containerHeightPx - PAGE_SCROLL_ALIGNMENT_OFFSET_PX - scrollPaddingBottomPx);
}

function getDirection(key: PageScrollKey): -1 | 1 {
  return key === "PageUp" ? -1 : 1;
}

function easeInOut(progress: number): number {
  const ax = 3 * 0.42 - 3 * 0.58 + 1;
  const bx = 3 * (0.58 - 2 * 0.42);
  const cx = 3 * 0.42;
  const ay = -2;
  const by = 3;
  const x = (value: number) => ((ax * value + bx) * value + cx) * value;
  const y = (value: number) => (ay * value + by) * value * value;

  let value = progress;
  for (let index = 0; index < 5; index += 1) {
    const delta = x(value) - progress;
    const derivative = (3 * ax * value + 2 * bx) * value + cx;
    if (Math.abs(delta) < 1e-4 || derivative === 0) {
      break;
    }
    value -= delta / derivative;
    value = Math.min(1, Math.max(0, value));
  }

  return y(value);
}

export function createPageScrollController({
  getContainer,
  getScrollPaddingBottomPx,
  onScrollStart,
  env = getDefaultEnv(),
}: {
  getContainer: () => PageScrollContainer | null;
  getScrollPaddingBottomPx: () => number;
  onScrollStart?: (key: PageScrollKey) => void;
  env?: PageScrollEnv;
}) {
  const state = {
    activeKey: null as PageScrollKey | null,
    discreteAnimationFrame: 0,
    holdDelayTimeout: 0,
    holdAnimationFrame: 0,
    holdStartTime: 0,
    lastFrameTime: 0,
    holdActive: false,
  };

  const readPageScrollDistance = (container: PageScrollContainer) =>
    getPageScrollDistancePx({
      containerHeightPx: container.getBoundingClientRect().height,
      scrollPaddingBottomPx: getScrollPaddingBottomPx(),
    });

  const cancelDiscreteAnimation = () => {
    if (state.discreteAnimationFrame === 0) {
      return;
    }

    env.cancelAnimationFrame(state.discreteAnimationFrame);
    state.discreteAnimationFrame = 0;
  };

  const stop = ({
    cancelDiscreteAnimation: shouldCancelDiscreteAnimation,
  }: {
    cancelDiscreteAnimation: boolean;
  }) => {
    if (state.holdDelayTimeout !== 0) {
      env.clearTimeout(state.holdDelayTimeout);
      state.holdDelayTimeout = 0;
    }

    if (state.holdAnimationFrame !== 0) {
      env.cancelAnimationFrame(state.holdAnimationFrame);
      state.holdAnimationFrame = 0;
    }

    if (shouldCancelDiscreteAnimation) {
      cancelDiscreteAnimation();
    }

    state.activeKey = null;
    state.holdStartTime = 0;
    state.lastFrameTime = 0;
    state.holdActive = false;
  };

  const smoothScrollBy = (container: PageScrollContainer, deltaY: number) => {
    cancelDiscreteAnimation();

    const startScrollTop = container.scrollTop;
    const startTime = env.now();

    const step = (now: number) => {
      const progress = Math.min(1, (now - startTime) / PAGE_SCROLL_ANIMATION_MS);
      container.scrollTop = startScrollTop + deltaY * easeInOut(progress);

      if (progress < 1) {
        state.discreteAnimationFrame = env.requestAnimationFrame(step);
        return;
      }

      state.discreteAnimationFrame = 0;
    };

    state.discreteAnimationFrame = env.requestAnimationFrame(step);
  };

  const startHoldScroll = (key: PageScrollKey, container: PageScrollContainer) => {
    cancelDiscreteAnimation();
    state.holdActive = true;
    state.holdStartTime = env.now();
    state.lastFrameTime = state.holdStartTime;

    const step = (now: number) => {
      if (state.activeKey !== key) {
        state.holdAnimationFrame = 0;
        return;
      }

      const deltaMs = now - state.lastFrameTime;
      state.lastFrameTime = now;

      const velocityPxPerMs = getPageScrollVelocityPxPerMs({
        holdElapsedMs: now - state.holdStartTime,
        pageScrollDistancePx: readPageScrollDistance(container),
      });
      const previousScrollTop = container.scrollTop;
      container.scrollTop = previousScrollTop + velocityPxPerMs * deltaMs * getDirection(key);

      if (deltaMs > 0 && container.scrollTop === previousScrollTop) {
        stop({ cancelDiscreteAnimation: true });
        return;
      }

      state.holdAnimationFrame = env.requestAnimationFrame(step);
    };

    state.holdAnimationFrame = env.requestAnimationFrame(step);
  };

  return {
    handleKeyDown(key: PageScrollKey) {
      const container = getContainer();
      if (!container) {
        return;
      }

      if (!canScrollInDirection(container, key)) {
        return;
      }

      if (state.activeKey === key) {
        return;
      }

      stop({ cancelDiscreteAnimation: true });
      state.activeKey = key;
      onScrollStart?.(key);

      smoothScrollBy(container, readPageScrollDistance(container) * getDirection(key));

      state.holdDelayTimeout = env.setTimeout(() => {
        state.holdDelayTimeout = 0;
        if (state.activeKey !== key) {
          return;
        }

        startHoldScroll(key, container);
      }, PAGE_SCROLL_HOLD_DELAY_MS);
    },
    handleKeyUp(key: string) {
      if (state.activeKey !== key) {
        return;
      }

      stop({ cancelDiscreteAnimation: state.holdActive });
    },
    releaseActiveKey() {
      stop({ cancelDiscreteAnimation: state.holdActive });
    },
    dispose() {
      stop({ cancelDiscreteAnimation: true });
    },
  };
}