"use client";
import React, { useState, useRef, useMemo, useCallback, PropsWithChildren } from "react";
import { PurchaseStore } from "./purchase-store.type";
import { PurchaseStoreState } from "./purchase-store-state.type";
import { PurchaseStoreContext } from "./purchase-store.context";

export const PurchaseStoreProvider = (props: PropsWithChildren<PurchaseStoreState>) => {
    const {
        children,
        ...initState
    } = props;

    const [state, setStateInner] = useState<PurchaseStoreState>(initState);

    const listeners = useRef(new Set<() => void>());

    const setState = useCallback((nextState: PurchaseStoreState) => {
        setStateInner(nextState);
        listeners.current.forEach((listener) => listener());
    }, []);

    const store = useMemo<PurchaseStore>(() => {
        return {
            state,
            subscribe: (listener: () => void) => {
                listeners.current.add(listener);

                return () => {
                    listeners.current.delete(listener);
                };
            },
            getSnapshot: () => state,
            setPlanId: (planId: string) => setState({ ...state, planId }),
            setPriceId: (priceId: string) => setState({ ...state, priceId }),
            setOrganizationId: (organizationId: string | undefined) => setState({ ...state, organizationId }),
            setSeats: (seats: number | null) => setState({ ...state, seats })
        };
    }, [state, setState]);

    return (
        <PurchaseStoreContext.Provider value={store}>
            {children}
        </PurchaseStoreContext.Provider>
    );
};