import { createContext, useMemo } from 'react';

import { FALLBACK_TIMING } from '../getTimingFromDownbeats';
import { EditTiming } from '../types';
import useEditTimingQuery from './useEditTimingQuery';

export const useEditTimingContext = (clipId: string) => {
  const timing = useEditTimingQuery(clipId);

  const timingOrFallback = useMemo<EditTiming>(() => {
    return timing.data || FALLBACK_TIMING;
  }, [timing.isPending, timing.data]);

  return timingOrFallback;
};

const EditTimingContext = createContext<
  ReturnType<typeof useEditTimingContext>
>(undefined as never);

export default EditTimingContext;