"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.logCallbacks = exports.getStoryFactory = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var symToStr_1 = require("tsafe/symToStr");
var onyxia_ui_1 = require("onyxia-ui");
var useWindowInnerSize_1 = require("powerhooks/useWindowInnerSize");
var theme_1 = require("../theme");
var id_1 = require("tsafe/id");
require("onyxia-ui/assets/fonts/WorkSans/font.css");
var compat_1 = require("tss-react/compat");
var objectKeys_1 = require("tsafe/objectKeys");
function getStoryFactory(params) {
    var sectionName = params.sectionName, wrappedComponent = params.wrappedComponent, _a = params.argTypes, argTypes = _a === void 0 ? {} : _a, defaultWidth = params.defaultWidth;
    var Component = Object.entries(wrappedComponent).map(function (_a) {
        var _b = __read(_a, 2), component = _b[1];
        return component;
    })[0];
    function ScreenSize() {
        var windowInnerWidth = useWindowInnerSize_1.useWindowInnerSize().windowInnerWidth;
        var range = react_1.useMemo(function () {
            if (windowInnerWidth >= onyxia_ui_1.breakpointsValues["xl"]) {
                return "xl-∞";
            }
            if (windowInnerWidth >= onyxia_ui_1.breakpointsValues["lg"]) {
                return "lg-xl";
            }
            if (windowInnerWidth >= onyxia_ui_1.breakpointsValues["md"]) {
                return "md-lg";
            }
            if (windowInnerWidth >= onyxia_ui_1.breakpointsValues["sm"]) {
                return "sm-md";
            }
            return "0-sm";
        }, [windowInnerWidth]);
        return (jsx_runtime_1.jsxs(theme_1.Text, __assign({ typo: "body 1" }, { children: [windowInnerWidth, "px width: ", range] }), void 0));
    }
    var Template = function (_a) {
        var darkMode = _a.darkMode, width = _a.width, targetWindowInnerWidth = _a.targetWindowInnerWidth, chromeFontSize = _a.chromeFontSize, props = __rest(_a, ["darkMode", "width", "targetWindowInnerWidth", "chromeFontSize"]);
        var setIsDarkModeEnabled = onyxia_ui_1.useIsDarkModeEnabled().setIsDarkModeEnabled;
        react_1.useEffect(function () {
            setIsDarkModeEnabled(darkMode);
        }, [darkMode]);
        var getViewPortConfig = react_1.useCallback(function (_a) {
            var windowInnerWidth = _a.windowInnerWidth;
            return ({
                "targetBrowserFontSizeFactor": onyxia_ui_1.chromeFontSizesFactors[chromeFontSize],
                "targetWindowInnerWidth": targetWindowInnerWidth || windowInnerWidth,
            });
        }, [targetWindowInnerWidth, chromeFontSize]);
        return (jsx_runtime_1.jsx(theme_1.ThemeProviderDefault, __assign({ getViewPortConfig: getViewPortConfig }, { children: jsx_runtime_1.jsx(ContentWrapper, { width: width, ScreenSize: ScreenSize, Component: jsx_runtime_1.jsx(Component, __assign({}, props), void 0) }, void 0) }), void 0));
    };
    function getStory(props) {
        var out = Template.bind({});
        out.args = __assign({ "darkMode": false, "width": defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : 0, "targetWindowInnerWidth": 0, "chromeFontSize": "Medium (Recommended)" }, props);
        return out;
    }
    return {
        "meta": id_1.id({
            "title": sectionName + "/" + symToStr_1.symToStr(wrappedComponent),
            "component": Component,
            "argTypes": __assign({ "width": {
                    "control": {
                        "type": "range",
                        "min": 0,
                        "max": 1920,
                        "step": 1,
                    },
                }, "targetWindowInnerWidth": {
                    "control": {
                        "type": "range",
                        "min": 0,
                        "max": 2560,
                        "step": 10,
                    },
                }, "chromeFontSize": {
                    "options": objectKeys_1.objectKeys(onyxia_ui_1.chromeFontSizesFactors),
                    "control": { "type": "select" },
                } }, argTypes),
        }),
        getStory: getStory,
    };
}
exports.getStoryFactory = getStoryFactory;
function logCallbacks(propertyNames) {
    var out = id_1.id({});
    propertyNames.forEach(function (propertyName) {
        return (out[propertyName] = console.log.bind(console, propertyName));
    });
    return out;
}
exports.logCallbacks = logCallbacks;
var ContentWrapper = (function () {
    var ContentWrapper = react_1.memo(function (props) {
        var Component = props.Component, ScreenSize = props.ScreenSize, width = props.width;
        var theme = theme_1.useTheme();
        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(compat_1.GlobalStyles, { styles: {
                        "html": {
                            "font-size": "100% !important",
                        },
                        "body": {
                            "padding": "0 !important",
                            "backgroundColor": theme.colors.useCases.surfaces.background + " !important",
                        },
                    } }, void 0),
                jsx_runtime_1.jsx(ScreenSize, {}, void 0),
                jsx_runtime_1.jsx("div", __assign({ style: {
                        "width": width || undefined,
                        "border": "1px dotted grey",
                        "display": "inline-block",
                    } }, { children: Component }), void 0)] }, void 0));
    });
    return { ContentWrapper: ContentWrapper };
})().ContentWrapper;
//# sourceMappingURL=getStory.js.map