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 __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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo, useReducer } from "react";
import MuiCheckIcon from "@mui/icons-material/Check";
import { Text } from "./theme";
import { Markdown } from "./tools/Markdown";
import { makeStyles, breakpointsValues } from "./theme";
import { useIntersectionObserver } from "./tools/useIntersectionObserver";
import { motion } from "framer-motion";
import { createIcon } from "onyxia-ui/Icon";
import { useGuaranteedMemo } from "powerhooks/useGuaranteedMemo";
export var GlCheckList = memo(function (props) {
    var className = props.className, elements = props.elements, heading = props.heading, subHeading = props.subHeading, hasAnimation = props.hasAnimation, _a = props.CheckIcon, CheckIcon = _a === void 0 ? MuiCheckIcon : _a;
    var _b = __read(useReducer(function (x) { return x + 1; }, 0), 2), forceUpdate = _b[1];
    var container = useMemo(function () {
        if (hasAnimation === undefined || !hasAnimation) {
            return undefined;
        }
        return {
            "show": {},
            "hidden": { "opacity": 0 },
        };
    }, [hasAnimation]);
    var listItem = useMemo(function () {
        if (hasAnimation === undefined || !hasAnimation) {
            return undefined;
        }
        return {
            "hidden": {
                "opacity": 0,
                "y": -40,
            },
            "show": {},
        };
    }, [hasAnimation]);
    var ref = useIntersectionObserver({
        "callback": function (_a) {
            var observer = _a.observer, entry = _a.entry;
            if (hasAnimation === undefined || !hasAnimation) {
                observer.unobserve(entry.target);
                return;
            }
            if (container === undefined || listItem === undefined) {
                observer.unobserve(entry.target);
                return;
            }
            if (entry.isIntersecting) {
                container.show = {
                    "transition": {
                        "staggerChildren": 0.2,
                    },
                    "opacity": 1,
                };
                listItem.show = {
                    "opacity": 1,
                    "y": 0,
                    "transition": {
                        "duration": 0.6,
                        "ease": "easeOut",
                    },
                };
                observer.unobserve(entry.target);
                forceUpdate();
            }
        },
        "threshold": 0.4,
    }, []).ref;
    var _c = useStyles({
        "numberOfElements": elements === undefined ? 1 : elements.length,
    }, { props: props }), classes = _c.classes, cx = _c.cx;
    return (_jsxs("section", __assign({ className: cx(classes.root, className) }, { children: [(heading !== undefined || subHeading !== undefined) && (_jsxs("div", __assign({ className: classes.headingWrapper }, { children: [heading !== undefined && (_jsx(Text, __assign({ className: classes.heading, typo: "section heading" }, { children: heading }))), subHeading !== undefined && (_jsx(Markdown, __assign({ className: classes.subHeading }, { children: subHeading })))] }))), _jsx(motion.div, __assign({ ref: ref, variants: container, initial: "hidden", animate: "show", className: classes.elements }, { children: elements !== undefined &&
                    elements.map(function (elementProps, index) { return (_jsx(motion.div, __assign({ variants: listItem }, { children: _jsx(CheckListElement, __assign({ className: classes.element, classes: {
                                "checkIcon": classes.checkIcon,
                                "checkIconWrapper": classes.checkIconWrapper,
                                "description": classes.elementDescription,
                                "title": classes.elementTitle,
                                "titleAndDescriptionWrapper": classes.elementTitleAndDescriptionWrapper,
                            }, CheckIcon: CheckIcon }, elementProps)) }), index)); }) }))] })));
});
var useStyles = makeStyles({
    "name": { GlCheckList: GlCheckList },
})(function (theme, _a) {
    var numberOfElements = _a.numberOfElements;
    return ({
        "root": __assign(__assign({}, theme.spacing.rightLeft("padding", "".concat(theme.paddingRightLeft, "px"))), theme.spacing.topBottom("margin", "".concat(theme.spacing(7), "px"))),
        "heading": __assign({}, (function () {
            var value = "2rem";
            return {
                "fontSize": value,
                "lineHeight": value,
            };
        })()),
        "headingWrapper": {
            "marginBottom": theme.spacing(6),
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center",
        },
        "elements": {
            "justifyItems": theme.windowInnerWidth <= breakpointsValues.sm
                ? undefined
                : "center",
            "display": "grid",
            "gridTemplateColumns": "repeat(".concat((function () {
                if (theme.windowInnerWidth >= breakpointsValues.lg) {
                    if (numberOfElements >= 3) {
                        return 3;
                    }
                    return numberOfElements;
                }
                if (theme.windowInnerWidth >= breakpointsValues.md) {
                    if (numberOfElements >= 2) {
                        return 2;
                    }
                    return 1;
                }
                return 1;
            })(), ", 1fr)"),
            "gap": theme.spacing(6),
        },
        "subHeading": __assign(__assign({}, theme.typography.variants["body 1"].style), { "color": theme.colors.useCases.typography.textSecondary }),
        "element": {},
        "checkIconWrapper": {},
        "checkIcon": {},
        "elementTitleAndDescriptionWrapper": {},
        "elementTitle": {},
        "elementDescription": {},
    });
});
var CheckListElement = (function () {
    var CheckListElement = memo(function (props) {
        var description = props.description, title = props.title, className = props.className, CheckIcon = props.CheckIcon;
        var _a = useStyles(undefined, { props: props }), classes = _a.classes, cx = _a.cx;
        var Icon = useGuaranteedMemo(function () { return createIcon({ "check": CheckIcon }); }, [CheckIcon]).Icon;
        return (_jsxs("div", __assign({ className: cx(classes.root, className) }, { children: [_jsx("div", __assign({ className: classes.checkIconWrapper }, { children: _jsx(Icon, { iconId: "check", className: classes.checkIcon }) })), _jsxs("div", __assign({ className: classes.titleAndDescriptionWrapper }, { children: [title !== undefined && (_jsx(Markdown, __assign({ className: classes.title }, { children: title }))), description !== undefined && (_jsx(Markdown, __assign({ className: classes.description }, { children: description })))] }))] })));
    });
    var useStyles = makeStyles()(function (theme) { return ({
        "root": {
            "width": theme.windowInnerWidth >= breakpointsValues.sm
                ? 300
                : undefined,
            "display": "flex",
        },
        "checkIcon": {
            "color": theme.colors.useCases.alertSeverity.success.main,
        },
        "checkIconWrapper": {
            "paddingTop": theme.spacing(3.5),
            "marginRight": theme.spacing(3),
        },
        "description": __assign({ "color": theme.colors.useCases.typography.textSecondary }, theme.typography.variants["body 1"].style),
        "title": __assign({}, theme.typography.variants["object heading"].style),
        "titleAndDescriptionWrapper": {},
    }); });
    return { CheckListElement: CheckListElement };
})().CheckListElement;
//# sourceMappingURL=GlCheckList.js.map