import { createContext, useContext } from 'react';
import mitt from 'mitt';

import type { FC } from 'react';
import type { ItemPageEmitter } from './types';

// if there is no Provider in the tree then this default value is used
const Context = createContext<ItemPageEmitter>(mitt());

export const withEmitter = <P extends object>(Component: FC<P>) => {
  const emitter = mitt() as ItemPageEmitter;

  const ComponentWithEmitter: FC<P> = (props) => (
    <Context.Provider value={emitter}>
      <Component {...(props as P)} />
    </Context.Provider>
  );

  return ComponentWithEmitter;
};

export const useEmitter = () => useContext(Context);