import React, { createContext, useContext, useMemo } from 'react';

export const PlaySourceContext = createContext<{
  playSourceType: string;
  playSourceId: string;
}>({
  playSourceType: 'NOT_SET',
  playSourceId: 'NOT_SET',
});

export const PlaySourceContextProvider = ({
  children,
  playSourceType,
  playSourceId,
}: {
  children: React.ReactNode[] | React.ReactNode;
  playSourceType: string;
  playSourceId: string;
}) => {
  const value = useMemo(
    () => ({ playSourceType, playSourceId }),
    [playSourceType, playSourceId]
  );
  return (
    <PlaySourceContext.Provider value={value}>
      {children}
    </PlaySourceContext.Provider>
  );
};

const usePlaySourceContext = () => {
  return useContext(PlaySourceContext);
};

export default usePlaySourceContext;