import { observer } from 'mobx-react-lite';
import { memo } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { createContext, useContext } from '@/hooks/useContextSelector';
import { Clip } from '@/state/clipStore';

export const NullableClipContext = createContext<Clip | null>(null);

export const useNullableClipContext = () => useContext(NullableClipContext);

export const NullableClipContextProvider = memo(
  function NullableClipContextProvider({
    children,
    clip = null,
  }: {
    children: React.ReactNode;
    clip: Clip | null;
  }) {
    return (
      <NullableClipContext.Provider value={clip}>
        {children}
      </NullableClipContext.Provider>
    );
  }
);

export const ClipContext = createContext<Clip>(undefined as never);
export const useClipContext = () => useContext(ClipContext);

// Note: provides BOTH a ClipContext and a NullableClipContext
export const ClipContextProvider = observer(function ClipContextProvider({
  children,
  clip,
}: {
  children: React.ReactNode;
  clip: Clip;
}) {
  const { clips } = useStores();
  const upToDateClip = clips.clipById[clip.id];
  return (
    <ClipContext.Provider value={upToDateClip}>
      <NullableClipContextProvider clip={upToDateClip}>
        {children}
      </NullableClipContextProvider>
    </ClipContext.Provider>
  );
});