import { useEffect, useState } from "react";
import BlocState from "../states/BlocState";
import Cubit from "../cubit/interface/Cubit";

export type BuilderFunction = (state: any) => JSX.Element;

const BlocBuilder = <T extends Cubit<any>>({
    bloc,
    children,
}: {
    bloc: T,
    children: BuilderFunction
}) => {
    let isAsync = ("handleDefaultStates" in bloc)
    let [state, setState] = useState(isAsync ? (bloc.state as BlocState) : bloc.state)

    useEffect(() => {
        let cur: number
        if (isAsync) {
            cur = bloc.listen((state: BlocState) => {
                setState(state)
            });
        } else {
            cur = bloc.listen((state: any) => {
                setState(state)
            });
        }
        return () => {
            bloc.removeListener(cur);
        }
    }, [bloc]);

    return children(state);
}
export default BlocBuilder;