xref: /MusicFree/src/components/panels/usePanel.ts (revision 378a6099e3563e7a689fac0fd988de338a1d1de8)

import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
import {atom, useAtom} from 'jotai';
import {MutableRefObject, useEffect, useRef} from 'react';
import {BackHandler, NativeEventSubscription} from 'react-native';
import panels from './types';

type IPanel = typeof panels;
type IPanelkeys = keyof IPanel;

const panelNameAtom = atom<IPanelkeys | null>(null);
const payloadAtom = atom<any>(null);

export function _usePanel(ref?: MutableRefObject<BottomSheetMethods | undefined | null>) {
  const [panelName, setPanelName] = useAtom(panelNameAtom);
  const [payload, setPayload] = useAtom(payloadAtom);
  const backHandlerRef = useRef<NativeEventSubscription>();

  function showPanel<T extends IPanelkeys>(
    name: T,
    payload?: Parameters<IPanel[T]>[0],
  ) {
    setPanelName(name);
    setPayload(payload);
  }

  useEffect(() => {
    if (backHandlerRef.current) {
      backHandlerRef.current?.remove();
      backHandlerRef.current = undefined;
    }
    if (ref) {
      backHandlerRef.current = BackHandler.addEventListener(
        'hardwareBackPress',
        () => {
          ref.current?.close();
          return true;
        },
      );
    }
    return () => {
      if (backHandlerRef.current) {
        backHandlerRef.current?.remove();
        backHandlerRef.current = undefined;
      }
    };
  }, []);

  function unmountPanel() {
    setPanelName(null);
    setPayload(null);
  }

  return {payload, panelName, showPanel, unmountPanel};
}

export default function usePanel() {
  const {showPanel, unmountPanel} = _usePanel();
  return {showPanel, unmountPanel};
}