// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { ChatClientContext } from '../providers/ChatClientProvider';
import { useState, useEffect, useRef, useMemo, useContext } from 'react';
import { ChatThreadClientContext } from '../providers/ChatThreadClientProvider';
/**
 * Hook to obtain a selector for a specified component.
 *
 * Useful when implementing a custom component that utilizes the providers
 * exported from this library.
 *
 * @public
 */
export const useSelector = (selector, selectorProps) => {
    var _a;
    const chatClient = useContext(ChatClientContext);
    const threadId = (_a = useContext(ChatThreadClientContext)) === null || _a === void 0 ? void 0 : _a.threadId;
    // Keeps track of whether the current component is mounted or not. If it has unmounted, make sure we do not modify the
    // state or it will cause React warnings in the console. https://skype.visualstudio.com/SPOOL/_workitems/edit/2453212
    const mounted = useRef(false);
    useEffect(() => {
        mounted.current = true;
        return () => {
            mounted.current = false;
        };
    });
    const threadConfigProps = useMemo(() => ({
        threadId
    }), [threadId]);
    const [props, setProps] = useState(chatClient && selector ? selector(chatClient.getState(), selectorProps !== null && selectorProps !== void 0 ? selectorProps : threadConfigProps) : undefined);
    const propRef = useRef(props);
    propRef.current = props;
    useEffect(() => {
        if (!chatClient || !selector) {
            return;
        }
        const onStateChange = (state) => {
            const newProps = selector(state, selectorProps !== null && selectorProps !== void 0 ? selectorProps : threadConfigProps);
            if (propRef.current !== newProps) {
                setProps(newProps);
            }
        };
        chatClient.onStateChange(onStateChange);
        return () => {
            chatClient.offStateChange(onStateChange);
        };
    }, [chatClient, selector, selectorProps, threadConfigProps]);
    return (selector ? props : undefined);
};
//# sourceMappingURL=useSelector.js.map