"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.GlArticle = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var theme_1 = require("./theme");
var theme_2 = require("./theme");
var react_markdown_1 = __importDefault(require("react-markdown"));
var GlButton_1 = require("./utils/GlButton");
var framer_motion_1 = require("framer-motion");
var useIntersectionObserver_1 = require("./tools/useIntersectionObserver");
var tsafe_1 = require("tsafe");
var useStyles = theme_1.makeStyles()(function (theme, _a) {
    var illustrationPosition = _a.illustrationPosition, hasIllustration = _a.hasIllustration, hasArticle = _a.hasArticle;
    return ({
        "root": __assign({}, theme.spacing.rightLeft("padding", theme.paddingRightLeft + "px")),
        "contentWrapper": __assign(__assign({ "display": "flex", "flexDirection": (function () {
                if (illustrationPosition === "left" &&
                    theme.windowInnerWidth >= theme_2.breakpointsValues.md) {
                    return "row-reverse";
                }
                if (theme.windowInnerWidth < theme_2.breakpointsValues.md) {
                    return "column";
                }
                return undefined;
            })(), "alignItems": theme.windowInnerWidth < theme_2.breakpointsValues.md ? "left" : "center", "justifyContent": "center" }, (function () {
            var value = theme.spacing(7);
            return {
                "marginTop": value,
                "marginBottom": value,
            };
        })()), (function () {
            var value = theme.spacing(8);
            if (theme.windowInnerWidth < theme_2.breakpointsValues.lg || !hasArticle) {
                return undefined;
            }
            if (illustrationPosition === "left") {
                return {
                    "paddingRight": value,
                };
            }
            return {
                "paddingLeft": value,
            };
        })()),
        "article": __assign({ "display": "flex", "flexDirection": "column", "textAlign": "left", "marginBottom": (function () {
                if (theme.windowInnerWidth >= theme_2.breakpointsValues.md ||
                    !hasIllustration) {
                    return undefined;
                }
                return theme.spacing(8);
            })(), "width": (function () {
                if (!hasIllustration) {
                    return undefined;
                }
                if (theme.windowInnerWidth >= theme_2.breakpointsValues.xl) {
                    return 412;
                }
                if (theme.windowInnerWidth >= theme_2.breakpointsValues["lg+"]) {
                    return 311;
                }
                if (theme.windowInnerWidth >= theme_2.breakpointsValues.md) {
                    return 270;
                }
                return undefined;
            })() }, (function () {
            var value = theme.windowInnerWidth >= theme_2.breakpointsValues.lg
                ? theme.spacing(9)
                : theme.spacing(5);
            if (theme.windowInnerWidth < theme_2.breakpointsValues.md ||
                !hasIllustration) {
                return undefined;
            }
            if (illustrationPosition === "left") {
                return {
                    "marginLeft": value,
                };
            }
            return {
                "marginRight": value,
            };
        })()),
        "body": __assign(__assign({}, theme.typography.variants["body 1"].style), { "margin": theme.spacing({
                "topBottom": 4,
                "rightLeft": 0,
            }), "color": theme.colors.useCases.typography.textSecondary }),
        "buttonWrapper": {
            "display": "flex",
            "justifyContent": "flex-end",
        },
        "button": {
            "alignSelf": "right",
        },
        "aside": __assign({}, (theme.windowInnerWidth >= theme_2.breakpointsValues.md
            ? __assign(__assign({}, (function () {
                if (!hasArticle) {
                    return undefined;
                }
                var value = theme.spacing(8);
                switch (illustrationPosition) {
                    case "left":
                        return {
                            "marginRight": value,
                        };
                    case "right":
                        return {
                            "marginLeft": value,
                        };
                }
            })()), { "maxWidth": 800 }) : {})),
    });
});
exports.GlArticle = react_1.memo(function (props) {
    var illustration = props.illustration, body = props.body, buttonLabel = props.buttonLabel, illustrationPosition = props.illustrationPosition, title = props.title, className = props.className, id = props.id, buttonLink = props.buttonLink, animationVariant = props.animationVariant, classesProp = props.classes;
    var _a = __read(react_1.useReducer(function (x) { return x + 1; }, 0), 2), forceUpdate = _a[1];
    var _b = useStyles({
        "illustrationPosition": illustrationPosition !== null && illustrationPosition !== void 0 ? illustrationPosition : "right",
        "hasIllustration": illustration !== undefined,
        "hasArticle": title !== undefined ||
            body !== undefined ||
            buttonLabel !== undefined,
    }), classes = _b.classes, cx = _b.cx;
    var textTransitionParameters = react_1.useMemo(function () {
        return (animationVariant && {
            "ease": "easeOut",
            "duration": 0.5,
            "delay": 0.3,
        });
    }, []);
    var illustrationAnimationProps = react_1.useMemo(function () {
        return (animationVariant && {
            "initial": (function () {
                switch (animationVariant) {
                    case "secondary":
                        return {
                            "rotateY": "15deg",
                            "rotateX": "15deg",
                        };
                    default:
                        return {
                            "opacity": 0,
                            "x": illustrationPosition === "left"
                                ? -100
                                : 100,
                        };
                }
            })(),
            "animate": {},
            "transition": {
                "delay": 1,
                "duration": 1,
                "ease": "easeOut",
            },
        });
    }, []);
    var titleAnimationProps = react_1.useMemo(function () {
        return (animationVariant && {
            "initial": {
                "opacity": 0,
                "x": (function () {
                    var value = 100;
                    switch (illustrationPosition) {
                        case "left":
                            return value;
                        default:
                            return -value;
                    }
                })(),
            },
            "animate": {},
            "transition": textTransitionParameters,
        });
    }, []);
    var bodyAnimationProps = react_1.useMemo(function () {
        return (animationVariant && {
            "initial": {
                "opacity": 0,
            },
            "animate": {},
            "transition": textTransitionParameters,
        });
    }, []);
    var ref = useIntersectionObserver_1.useIntersectionObserver({
        "callback": function (_a) {
            var observer = _a.observer, entry = _a.entry;
            if (animationVariant === undefined) {
                observer.unobserve(entry.target);
                return;
            }
            tsafe_1.assert(illustrationAnimationProps !== undefined &&
                titleAnimationProps !== undefined &&
                bodyAnimationProps !== undefined);
            if (entry.isIntersecting) {
                illustrationAnimationProps.animate = (function () {
                    switch (animationVariant) {
                        case "secondary":
                            return {
                                "rotateX": 0,
                                "rotateY": 0,
                            };
                        default:
                            return {
                                "opacity": 1,
                                "x": 0,
                            };
                    }
                })();
                titleAnimationProps.animate = {
                    "opacity": 1,
                    "x": 0,
                };
                bodyAnimationProps.animate = {
                    "opacity": 1,
                };
                observer.unobserve(entry.target);
                forceUpdate();
            }
        },
    }).ref;
    return (jsx_runtime_1.jsx("section", __assign({ id: id, className: cx(classes.root, className) }, { children: jsx_runtime_1.jsxs("div", __assign({ className: cx(classes.contentWrapper, classesProp === null || classesProp === void 0 ? void 0 : classesProp.contentWrapper) }, { children: [(title !== undefined ||
                    body !== undefined ||
                    buttonLabel !== undefined) && (jsx_runtime_1.jsxs("article", __assign({ className: cx(classes.article, classesProp === null || classesProp === void 0 ? void 0 : classesProp.article) }, { children: [title && (jsx_runtime_1.jsx(framer_motion_1.motion.div, __assign({}, titleAnimationProps, { children: jsx_runtime_1.jsx(theme_1.Text, __assign({ className: classesProp === null || classesProp === void 0 ? void 0 : classesProp.title, typo: "page heading" }, { children: title }), void 0) }), void 0)),
                        body && (jsx_runtime_1.jsx(framer_motion_1.motion.div, __assign({}, bodyAnimationProps, { ref: ref }, { children: jsx_runtime_1.jsx(react_markdown_1.default, __assign({ className: cx(classes.body, classesProp === null || classesProp === void 0 ? void 0 : classesProp.body) }, { children: body }), void 0) }), void 0)),
                        buttonLabel && (jsx_runtime_1.jsx("div", __assign({ className: cx(classes.buttonWrapper, classesProp === null || classesProp === void 0 ? void 0 : classesProp.buttonWrapper) }, { children: jsx_runtime_1.jsx(GlButton_1.GlButton, __assign({ className: cx(classes.button, classesProp === null || classesProp === void 0 ? void 0 : classesProp.button), type: "submit", href: buttonLink === null || buttonLink === void 0 ? void 0 : buttonLink.href, onClick: buttonLink === null || buttonLink === void 0 ? void 0 : buttonLink.onClick, variant: "secondary" }, { children: buttonLabel }), void 0) }), void 0))] }), void 0)),
                jsx_runtime_1.jsx(framer_motion_1.motion.div, __assign({}, illustrationAnimationProps, { children: jsx_runtime_1.jsx("aside", __assign({ className: cx(classes.aside, classesProp === null || classesProp === void 0 ? void 0 : classesProp.illustrationWrapper) }, { children: illustration }), void 0) }), void 0)] }), void 0) }), void 0));
});
//# sourceMappingURL=GlArticle.js.map