"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 __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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlCheckList = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var Check_1 = __importDefault(require("@mui/icons-material/Check"));
var theme_1 = require("./theme");
var Markdown_1 = require("./tools/Markdown");
var theme_2 = require("./theme");
var useIntersectionObserver_1 = require("./tools/useIntersectionObserver");
var framer_motion_1 = require("framer-motion");
var tss_react_1 = require("tss-react");
exports.GlCheckList = (0, react_1.memo)(function (props) {
    var className = props.className, elements = props.elements, heading = props.heading, subHeading = props.subHeading, hasAnimation = props.hasAnimation;
    var _a = __read((0, react_1.useReducer)(function (x) { return x + 1; }, 0), 2), forceUpdate = _a[1];
    var container = (0, react_1.useMemo)(function () {
        if (hasAnimation === undefined || !hasAnimation) {
            return undefined;
        }
        return {
            "show": {},
            "hidden": { "opacity": 0 },
        };
    }, []);
    var listItem = (0, react_1.useMemo)(function () {
        if (hasAnimation === undefined || !hasAnimation) {
            return undefined;
        }
        return {
            "hidden": {
                "opacity": 0,
                "y": -40,
            },
            "show": {},
        };
    }, []);
    var ref = (0, useIntersectionObserver_1.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 classes = useStyles({
        "numberOfElements": elements === undefined ? 1 : elements.length,
    }).classes;
    classes = (0, tss_react_1.useMergedClasses)(classes, props.classes);
    return ((0, jsx_runtime_1.jsxs)("section", __assign({ className: className }, { children: [(heading !== undefined || subHeading !== undefined) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: classes.headingWrapper }, { children: [heading !== undefined && ((0, jsx_runtime_1.jsx)(theme_1.Text, __assign({ className: classes.heading, typo: "section heading" }, { children: heading }))), subHeading !== undefined && ((0, jsx_runtime_1.jsx)(Markdown_1.Markdown, __assign({ className: classes.subHeading }, { children: subHeading })))] }))), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, __assign({ ref: ref, variants: container, initial: "hidden", animate: "show", className: classes.elements }, { children: elements !== undefined &&
                    elements.map(function (elementProps, index) { return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, __assign({ variants: listItem }, { children: (0, jsx_runtime_1.jsx)(CheckListElement, __assign({ className: classes.element, classes: {
                                "checkIcon": classes.checkIcon,
                                "checkIconWrapper": classes.checkIconWrapper,
                                "description": classes.elementDescription,
                                "title": classes.elementTitle,
                                "titleAndDescriptionWrapper": classes.elementTitleAndDescriptionWrapper,
                            } }, elementProps)) }), index)); }) }))] })));
});
var useStyles = (0, theme_2.makeStyles)({
    "name": { GlCheckList: exports.GlCheckList },
})(function (theme, _a) {
    var numberOfElements = _a.numberOfElements;
    return ({
        "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 <= theme_2.breakpointsValues.sm
                ? undefined
                : "center",
            "display": "grid",
            "gridTemplateColumns": "repeat(".concat((function () {
                if (theme.windowInnerWidth >= theme_2.breakpointsValues.lg) {
                    if (numberOfElements >= 3) {
                        return 3;
                    }
                    return numberOfElements;
                }
                if (theme.windowInnerWidth >= theme_2.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 = (0, react_1.memo)(function (props) {
        var description = props.description, title = props.title, className = props.className, classesProp = props.classes;
        var _a = useStyles(), classes = _a.classes, cx = _a.cx;
        var mergedClasses = (0, tss_react_1.useMergedClasses)(classes, classesProp);
        return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(mergedClasses.root, className) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: mergedClasses.checkIconWrapper }, { children: (0, jsx_runtime_1.jsx)(Check_1.default, { className: classesProp === null || classesProp === void 0 ? void 0 : classesProp.checkIcon, color: "success" }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: classesProp === null || classesProp === void 0 ? void 0 : classesProp.titleAndDescriptionWrapper }, { children: [title !== undefined && ((0, jsx_runtime_1.jsx)(Markdown_1.Markdown, __assign({ className: mergedClasses.title }, { children: title }))), (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, __assign({ className: mergedClasses.description }, { children: description }))] }))] })));
    });
    var useStyles = (0, theme_2.makeStyles)()(function (theme) { return ({
        "root": {
            "width": theme.windowInnerWidth >= theme_2.breakpointsValues.sm
                ? 300
                : undefined,
            "display": "flex",
        },
        "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),
    }); });
    return { CheckListElement: CheckListElement };
})().CheckListElement;
//# sourceMappingURL=GlCheckList.js.map