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;
};
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 { tss, breakpointsValues } from "./theme";
import { useIntersectionObserver } from "./tools/useIntersectionObserver";
import { motion } from "framer-motion";
import { createIcon } from "onyxia-ui/Icon";
import { useGuaranteedMemo } from "powerhooks/useGuaranteedMemo";
var elementWidth = 300;
export var GlCheckList = memo(function (props) {
    var className = props.className, elements = props.elements, heading = props.heading, subHeading = props.subHeading, hasAnimation = props.hasAnimation, Icon = props.Icon, setIconColor = props.setIconColor;
    var _a = __read(useReducer(function (x) { return x + 1; }, 0), 2), forceUpdate = _a[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.05,
    }, []).ref;
    var _b = useStyles({
        "classesOverrides": props.classes,
    }), classes = _b.classes, cx = _b.cx, theme = _b.theme;
    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 &&
                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
                    elements.map(function (_a) {
                        var setIconColorOverride = _a.setIconColorOverride, rest = __rest(_a, ["setIconColorOverride"]);
                        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,
                                }, iconColor: setIconColor === undefined
                                    ? theme.colors.palette.greenSuccess.main
                                    : setIconColor(theme.colors).iconColor, Icon: Icon }, rest)) }), rest.title));
                    }) }))] })));
});
var useStyles = tss.withName({ GlCheckList: GlCheckList }).create(function (_a) {
    var theme = _a.theme;
    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",
            "columnCount": 3,
            "gridTemplateColumns": "repeat(auto-fit, minmax(min(100%, max(".concat(elementWidth, "px, 25%)), 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, isIconHidden = props.isIconHidden, IconOverride = props.IconOverride, setIconColorOverride = props.setIconColorOverride;
        var _a = useStyles({
            "isIconHidden": isIconHidden !== null && isIconHidden !== void 0 ? isIconHidden : false,
            "classesOverrides": props.classes,
        }), classes = _a.classes, cx = _a.cx, theme = _a.theme, css = _a.css;
        var iconColor = useGuaranteedMemo(function () {
            return {
                "iconColor": (function () {
                    if (setIconColorOverride === undefined) {
                        return props.iconColor;
                    }
                    return setIconColorOverride(theme.colors).iconColor;
                })(),
            };
        }, [setIconColorOverride]).iconColor;
        var Icon = useGuaranteedMemo(function () {
            var _a;
            return createIcon({
                "check": (_a = IconOverride !== null && IconOverride !== void 0 ? IconOverride : props.Icon) !== null && _a !== void 0 ? _a : MuiCheckIcon,
            });
        }, [IconOverride]).Icon;
        return (_jsxs("div", __assign({ className: cx(classes.root, className) }, { children: [_jsx("div", __assign({ className: classes.checkIconWrapper }, { children: _jsx(Icon, { iconId: "check", className: cx(css({
                            "fill": iconColor,
                        }), 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 = tss
        .withParams()
        .create(function (_a) {
        var theme = _a.theme, isIconHidden = _a.isIconHidden;
        return ({
            "root": {
                "width": theme.windowInnerWidth >= breakpointsValues.sm
                    ? elementWidth
                    : undefined,
                "display": "flex",
            },
            "checkIcon": {},
            "checkIconWrapper": {
                "paddingTop": theme.spacing(3.5),
                "marginRight": theme.spacing(3),
                "opacity": isIconHidden ? 0 : 1,
            },
            "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