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, useReducer, useMemo, useState } from "react";
import { tss } from "./theme";
import { breakpointsValues } from "./theme";
import { GlButton } from "./utils/GlButton";
import { motion } from "framer-motion";
import { useIntersectionObserver } from "./tools/useIntersectionObserver";
import { Markdown } from "./tools/Markdown";
import { Text } from "./theme";
import { GlImage } from "./utils/GlImage";
import { GlVideo } from "./utils/GlVideo";
import { useConstCallback } from "powerhooks/useConstCallback";
import { useMediaAspectRatio } from "./tools/useMediaAspectRatio";
import { useIllustrationStyles } from "./theme";
var textTransitionParameters = {
    "ease": "easeOut",
    "duration": 0.5,
};
function getIllustrationAnimationProps(params) {
    var illustrationPosition = params.illustrationPosition;
    return {
        "initial": (function () {
            return {
                "opacity": 0,
                "x": illustrationPosition === "left" ? -100 : 100,
            };
        })(),
        "animate": {},
        "transition": {
            "delay": 0.3,
            "duration": 0.5,
            "ease": "easeOut",
        },
    };
}
function getTitleAnimationProps(params) {
    var illustrationPosition = params.illustrationPosition;
    return {
        "initial": {
            "opacity": 0,
            "x": (function () {
                var value = 100;
                switch (illustrationPosition) {
                    case "left":
                        return value;
                    default:
                        return -value;
                }
            })(),
        },
        "animate": {},
        "transition": textTransitionParameters,
    };
}
var bodyAnimationProps = {
    "initial": {
        "opacity": 0,
    },
    "animate": {},
    "transition": textTransitionParameters,
};
export var GlArticle = memo(function (props) {
    var _a;
    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, hasAnimation = props.hasAnimation, illustrationZoomFactor = props.illustrationZoomFactor;
    var _b = __read(useReducer(function (x) { return x + 1; }, 0), 2), forceUpdate = _b[1];
    var _c = __read(useState(function () {
        if (illustration === undefined ||
            illustration.type === "custom component") {
            return true;
        }
        return false;
    }), 2), isIllustrationLoaded = _c[0], setIsIllustrationLoaded = _c[1];
    var illustrationAnimationProps = useMemo(function () { return getIllustrationAnimationProps({ illustrationPosition: illustrationPosition }); }, [illustrationPosition]);
    var titleAnimationProps = useMemo(function () { return getTitleAnimationProps({ illustrationPosition: illustrationPosition }); }, [illustrationAnimationProps]);
    var ref = useIntersectionObserver({
        "callback": function (_a) {
            var observer = _a.observer, entry = _a.entry;
            if (hasAnimation === undefined || !hasAnimation) {
                observer.unobserve(entry.target);
                return;
            }
            if (entry.isIntersecting && isIllustrationLoaded) {
                illustrationAnimationProps.animate = {
                    "opacity": 1,
                    "x": 0,
                };
                titleAnimationProps.animate = {
                    "opacity": 1,
                    "x": 0,
                };
                bodyAnimationProps.animate = {
                    "opacity": 1,
                };
                observer.unobserve(entry.target);
                forceUpdate();
            }
        },
        "threshold": 0.2,
    }, [isIllustrationLoaded]).ref;
    var _d = useMediaAspectRatio(), aspectRatio = _d.aspectRatio, mediaRef = _d.ref;
    var onIllustrationLoaded = useConstCallback(function () {
        setIsIllustrationLoaded(true);
    });
    var hasArticle = title !== undefined || body !== undefined || buttonLabel !== undefined;
    var hasIllustration = illustration !== undefined;
    var _e = useStyles({
        "illustrationPosition": illustrationPosition !== null && illustrationPosition !== void 0 ? illustrationPosition : "right",
        hasIllustration: hasIllustration,
        hasArticle: hasArticle,
        isIllustrationLoaded: isIllustrationLoaded,
        aspectRatio: aspectRatio,
        "classesOverrides": props.classes,
    }), classes = _e.classes, cx = _e.cx;
    var illustrationClasses = useIllustrationStyles({
        aspectRatio: aspectRatio,
        illustrationZoomFactor: illustrationZoomFactor,
        "type": (_a = props.illustration) === null || _a === void 0 ? void 0 : _a.type,
    }).classes;
    return (_jsxs("section", __assign({ ref: ref, id: id, className: cx(classes.root, className) }, { children: [hasArticle && (_jsxs("article", __assign({ className: classes.article }, { children: [title && (_jsx(motion.div, __assign({}, (function () {
                        if (!hasAnimation) {
                            return undefined;
                        }
                        return titleAnimationProps;
                    })(), { children: typeof title === "string" ? (_jsx(Text, __assign({ typo: "page heading" }, { children: title }))) : (title) }))), body && (_jsx(motion.div, __assign({}, (function () {
                        if (!hasAnimation) {
                            return undefined;
                        }
                        return bodyAnimationProps;
                    })(), { children: typeof body === "string" ? (_jsx(Markdown, __assign({ className: classes.body }, { children: body }))) : (body) }))), buttonLabel && (_jsx(GlButton, __assign({ type: "submit", href: buttonLink === null || buttonLink === void 0 ? void 0 : buttonLink.href, onClick: buttonLink === null || buttonLink === void 0 ? void 0 : buttonLink.onClick, variant: "secondary", className: classes.button }, { children: buttonLabel })))] }))), hasIllustration && (_jsx(motion.aside, __assign({ className: cx(illustrationClasses.root, classes.aside) }, (function () {
                if (!hasAnimation) {
                    return undefined;
                }
                return illustrationAnimationProps;
            })(), { children: (function () {
                    switch (illustration.type) {
                        case "custom component":
                            return (_jsx(illustration.Component, { onLoad: onIllustrationLoaded, id: "customComponentId", className: classes.customComponent }));
                        case "image":
                            return (_jsx(GlImage, __assign({ className: classes.image, onLoad: onIllustrationLoaded }, illustration, { ref: mediaRef })));
                        case "video":
                            return (_jsx(GlVideo, __assign({ className: classes.video, onLoad: onIllustrationLoaded }, illustration, { ref: mediaRef })));
                    }
                })() })))] })));
});
var useStyles = tss
    .withName({ GlArticle: GlArticle })
    .withParams()
    .create(function (_a) {
    var theme = _a.theme, illustrationPosition = _a.illustrationPosition, hasIllustration = _a.hasIllustration, hasArticle = _a.hasArticle, isIllustrationLoaded = _a.isIllustrationLoaded, aspectRatio = _a.aspectRatio;
    return ({
        "root": __assign(__assign(__assign({}, theme.spacing.rightLeft("padding", "".concat(theme.paddingRightLeft, "px"))), { "display": "flex", "alignItems": "center", "justifyContent": "center", "flexDirection": (function () {
                if (theme.windowInnerWidth < breakpointsValues.md) {
                    return "column";
                }
                switch (illustrationPosition) {
                    case "left":
                        return "row-reverse";
                    case "right":
                        return "row";
                }
            })() }), theme.spacing.topBottom("margin", "".concat(theme.spacing(7), "px"))),
        "article": __assign({ "display": "flex", "flexDirection": "column", "minWidth": (function () {
                if (isNaN(aspectRatio) ||
                    theme.windowInnerWidth >= breakpointsValues.lg) {
                    return 300;
                }
                if (theme.windowInnerWidth < breakpointsValues.md) {
                    return undefined;
                }
                return 200;
            })(), "flex": hasIllustration ? 0.7 : undefined, "marginBottom": theme.windowInnerWidth >= breakpointsValues.md ||
                !hasIllustration
                ? undefined
                : theme.spacing(8) }, (function () {
            var value = theme.windowInnerWidth >= breakpointsValues.lg
                ? theme.spacing(9)
                : theme.spacing(5);
            if (theme.windowInnerWidth < breakpointsValues.md ||
                !hasIllustration) {
                return undefined;
            }
            switch (illustrationPosition) {
                case "left":
                    return { "marginRight": value };
                case "right":
                    return { "marginLeft": value };
            }
        })()),
        "aside": __assign({}, (function () {
            if (!hasArticle ||
                theme.windowInnerWidth < breakpointsValues.md) {
                return undefined;
            }
            var value = (function () {
                if (isNaN(aspectRatio) ||
                    theme.windowInnerWidth >= breakpointsValues.lg) {
                    return theme.spacing(10);
                }
                return theme.spacing(8);
            })();
            switch (illustrationPosition) {
                case "left":
                    return {
                        "marginRight": value,
                    };
                case "right":
                    return {
                        "marginLeft": value,
                    };
            }
        })()),
        "body": {
            "color": theme.colors.useCases.typography.textSecondary,
        },
        "button": {
            "alignSelf": "end",
            "opacity": isIllustrationLoaded ? 1 : 0,
        },
        "image": {
            "width": "100%",
            "height": "auto",
            "objectFit": "cover",
            "verticalAlign": "middle",
        },
        "video": {
            "width": "100%",
        },
        "customComponent": {},
    });
});
//# sourceMappingURL=GlArticle.js.map