import { createContext, useContext, useEffect } from 'react';
import type { ReactNode } from 'react';

// 页头槽：页面挂载时把自己的内容注册到布局 PageContainer 的 content 行——
// info 在左（实体标识/关键状态），actions 在右（操作按钮，右侧对齐），卸载时自动清除。
// Layout 提供 Provider，页面只消费 usePageInfo / usePageActions。
type SetSlot = (node: ReactNode) => void;
const PageHeaderSlotsContext = createContext<{ setInfo: SetSlot; setActions: SetSlot }>({
  setInfo: () => {},
  setActions: () => {},
});

function useSlot(setSlot: SetSlot, node: ReactNode, deps: unknown[]) {
  useEffect(() => {
    setSlot(node);
    return () => setSlot(null);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
}

export function usePageInfo(node: ReactNode, deps: unknown[] = []) {
  const { setInfo } = useContext(PageHeaderSlotsContext);
  useSlot(setInfo, node, deps);
}

export function usePageActions(node: ReactNode, deps: unknown[] = []) {
  const { setActions } = useContext(PageHeaderSlotsContext);
  useSlot(setActions, node, deps);
}

export { PageHeaderSlotsContext };