import React, { createContext, useContext, useState } from 'react';
import { WixPatternsRouterState } from '../state/WixPatternsRouterState';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export const WixPatternsRouterContext =
  createContext<WixPatternsRouterState | null>(null);

export interface WixPatternsRouterProviderProps {
  children: React.ReactNode;
}

export const WixPatternsRouterProvider = ({
  children,
}: WixPatternsRouterProviderProps) => {
  const container = useWixPatternsContainer();

  const [routerState] = useState(
    () => new WixPatternsRouterState({ container, navigate: () => {} }),
  );

  return (
    <WixPatternsRouterContext.Provider value={routerState}>
      {children}
    </WixPatternsRouterContext.Provider>
  );
};

export const useWixPatternsRouter = () => useContext(WixPatternsRouterContext);