import { useState } from "react";
import { useSelector } from "react-redux";
import { initStore, getStore } from "./store";

import { Routes, getRoutes } from "./managers/routes";
import { Controller } from "./controller";

const useAppSelector = <T>( selector: ( state: any ) => T ) => useSelector( selector );

export const useCurrentRoute = () => {
    const state = useState( getRoutes().currentRoute ),
        [ prevRoute, setRoute ] = state;

    const unsubscribe = getStore().subscribe( () => {
        const change = getStore().getState()['Flow/Redux/Routes']

        if ( JSON.stringify( prevRoute.current ) !== JSON.stringify( change.current ) ) {
            setRoute( change );
        }
    } );

    return {
        unsubscribe,
        current: prevRoute
    };
};

export function useControllerProperty( name: string, property: string ) {
    return useAppSelector( state => state[ name ][ property ] );
}

export function useController( name: string ) {
    return useAppSelector( state => state[ name ] );
}

export {
    initStore,
    getStore,
    getRoutes,
    Routes,
    Controller
}