"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const Context_1 = require("../../Context");
const react_loadable_1 = tslib_1.__importDefault(require("react-loadable"));
const react_1 = tslib_1.__importDefault(require("react"));
const ReactLoadableLoading_1 = require("../ReactLoadableLoading");
/**
 * # 🎣 BlueBaseHook
 *
 * Since hooks in BlueBase are based on promises, it may be tedious to handle loading state,
 * error state, etc. It may also become a repetitive task.
 *
 * To solve this issue, we ship BlueBaseHook component. Just pass name of hook, initial value,
 * and hook arguments as props. The final hooked value will be passed to the children function.
 * This component will handle loading and error states itself.
 *
 * ## Usage
 * ```jsx
 * <BlueBaseHook hook="math" value={5} args={{ op: 'add' }} children={(val: number) => {
 * 	return <Text>{val}</Text>;
 * }} />
 * ```
 */
class BlueBaseHook extends react_1.default.PureComponent {
    render() {
        const { hook, value, args, children } = this.props;
        const BB = this.context;
        const AsyncBlueBaseHook = react_loadable_1.default({
            loader: () => BB.Hooks.run(hook, value, args),
            loading: ReactLoadableLoading_1.ReactLoadableLoading,
            render(loadedValue) {
                return children(loadedValue);
            }
        });
        return react_1.default.createElement(AsyncBlueBaseHook, null);
    }
}
BlueBaseHook.contextType = Context_1.BlueBaseContext;
BlueBaseHook.defaultProps = {
    args: {}
};
exports.BlueBaseHook = BlueBaseHook;
