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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (g && (g = 0, op[0] && (_ = 0)), _) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
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";
/* eslint-disable @typescript-eslint/no-namespace */
/* eslint-disable @typescript-eslint/ban-types */
import { Text } from "../theme";
import { GlImage } from "../utils/GlImage";
import { memo, useEffect, useState } from "react";
import { tss } from "../theme";
import { useSplashScreen } from "onyxia-ui";
import { motion } from "framer-motion";
import { breakpointsValues } from "../theme";
import { GlArrow } from "../utils/GlArrow";
import { useConstCallback } from "powerhooks/useConstCallback";
import { getScrollableParent } from "powerhooks/getScrollableParent";
import { GlHeroText } from "./GlHeroText";
import { GlVideo } from "../utils/GlVideo";
import { useStateRef } from "powerhooks/useStateRef";
import { useMediaAspectRatio } from "../tools/useMediaAspectRatio";
import { useIllustrationStyles } from "../theme";
var illustrationId = "illustrationId";
var textWrapperVariant = {
    "show": {},
    "hidden": { "opacity": 0 },
};
var textVariant = {
    "show": {},
    "hidden": {
        "x": -150,
        "opacity": 0,
    },
};
var imageAnimProps = {
    "transition": {
        "delay": 1,
        "duration": 0.5,
    },
    "initial": {
        "opacity": 0,
    },
    "animate": {},
};
export var GlHero = memo(function (props) {
    var _a;
    var title = props.title, subTitle = props.subTitle, className = props.className, hasLinkToSectionBellow = props.hasLinkToSectionBellow, illustration = props.illustration, hasAnimation = props.hasAnimation, illustrationZoomFactor = props.illustrationZoomFactor;
    var _b = __read(useState(false), 2), isAnimationComplete = _b[0], setIsAnimationComplete = _b[1];
    var _c = __read(useState(false), 2), isImageLoaded = _c[0], setIsImageLoaded = _c[1];
    var ref = useStateRef(null);
    var _d = useMediaAspectRatio(), mediaRef = _d.ref, aspectRatio = _d.aspectRatio;
    var handleOnIllustrationLoad = useConstCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 50); })];
                case 1:
                    _a.sent();
                    setIsImageLoaded(true);
                    return [2 /*return*/];
            }
        });
    }); });
    var animate = useConstCallback(function () {
        textWrapperVariant.show = {
            "transition": {
                "staggerChildren": 0.5,
            },
            "opacity": 1,
        };
        textVariant.show = {
            "opacity": 1,
            "x": 0,
            "transition": {
                "duration": 1,
                "ease": "easeOut",
            },
        };
        imageAnimProps.animate = {
            "opacity": 1,
        };
        setIsAnimationComplete(true);
    });
    useSplashScreen({
        "onHidden": function () {
            if (isImageLoaded &&
                isAnimationComplete &&
                (hasAnimation || hasAnimation === undefined)) {
                animate();
            }
        },
    });
    useEffect(function () {
        if (!isImageLoaded ||
            isAnimationComplete ||
            (!hasAnimation && hasAnimation !== undefined)) {
            return;
        }
        animate();
    }, [isImageLoaded]);
    var onClick = useConstCallback(function () {
        var element = ref.current;
        if (!element)
            return;
        getScrollableParent({
            element: element,
            "doReturnElementIfScrollable": true,
        }).scrollTo({
            "behavior": "smooth",
            "top": element.clientHeight,
        });
    });
    var _e = useStyles({
        "hasOnlyText": illustration === undefined,
        isImageLoaded: isImageLoaded,
        "classesOverrides": props.classes,
    }), classes = _e.classes, cx = _e.cx;
    var illustrationClasses = useIllustrationStyles({
        illustrationZoomFactor: illustrationZoomFactor,
        aspectRatio: aspectRatio,
        "type": (_a = props.illustration) === null || _a === void 0 ? void 0 : _a.type,
    }).classes;
    return (_jsxs("section", __assign({ ref: ref, className: cx(classes.root, className) }, { children: [_jsxs("div", __assign({ className: classes.textAndImageWrapper }, { children: [(title !== undefined || subTitle !== undefined) && (_jsxs(motion.div, __assign({ className: classes.textWrapper }, (function () {
                        if (!hasAnimation && hasAnimation !== undefined) {
                            return;
                        }
                        return {
                            "variants": textWrapperVariant,
                            "initial": "hidden",
                            "animate": "show",
                        };
                    })(), { children: [title !== undefined && (_jsx(motion.div, __assign({ variants: hasAnimation || hasAnimation === undefined
                                    ? textVariant
                                    : undefined }, { children: typeof title === "string" ? (_jsx(GlHeroText, __assign({ className: classes.title }, { children: title }))) : (title) }))), subTitle !== undefined && (_jsx(motion.div, __assign({ variants: hasAnimation || hasAnimation === undefined
                                    ? textVariant
                                    : undefined }, { children: typeof subTitle === "string" ? (_jsx(Text, __assign({ typo: "subtitle", className: classes.subtitle }, { children: subTitle }))) : (subTitle) })))] }))), illustration !== undefined && (_jsx(motion.div, __assign({}, (hasAnimation || hasAnimation === undefined
                        ? imageAnimProps
                        : undefined), { className: cx(illustrationClasses.root, classes.illustrationWrapper) }, { children: (function () {
                            switch (illustration.type) {
                                case "image":
                                    return (_jsx(GlImage, __assign({ ref: mediaRef, id: illustrationId, className: classes.illustration, alt: "hero image", onLoad: handleOnIllustrationLoad }, illustration)));
                                case "video":
                                    return (_jsx(GlVideo, __assign({ ref: mediaRef, id: illustrationId, className: classes.illustration, onLoad: handleOnIllustrationLoad }, illustration)));
                                case "custom component":
                                    return (_jsx(illustration.Component, { id: illustrationId, className: classes.illustration, onLoad: handleOnIllustrationLoad }));
                            }
                        })() })))] })), hasLinkToSectionBellow !== undefined && (_jsx("div", __assign({ className: classes.linkToSectionBelowWrapper }, { children: _jsx(GlArrow, { onClick: onClick, className: classes.arrow, direction: "down", hasCircularBorder: true }) })))] })));
});
var useStyles = tss
    .withName({ GlHero: GlHero })
    .withParams()
    .create(function (_a) {
    var theme = _a.theme, hasOnlyText = _a.hasOnlyText, isImageLoaded = _a.isImageLoaded;
    return ({
        "root": __assign({ "width": "100%", "paddingBottom": theme.spacing(7) }, theme.spacing.rightLeft("padding", "".concat(theme.paddingRightLeft, "px"))),
        "arrow": {
            "cursor": "pointer",
        },
        "textAndImageWrapper": __assign({ "margin": theme.spacing({
                "topBottom": 5,
                "rightLeft": 0,
            }), "minHeight": (window.innerHeight / 100) * 70, "display": "flex", "alignItems": "center", "justifyContent": "center" }, (theme.windowInnerWidth < breakpointsValues.md
            ? {
                "flexDirection": "column",
                "alignItems": "left",
            }
            : {})),
        "title": {
            "marginBottom": theme.spacing(4),
        },
        "subtitle": __assign({ "marginTop": theme.spacing(4), "maxWidth": 650, "color": theme.colors.useCases.typography.textSecondary }, (function () {
            if (theme.windowInnerWidth >= breakpointsValues["lg+"]) {
                return undefined;
            }
            return theme.typography.variants["body 1"].style;
        })()),
        "textWrapper": __assign(__assign(__assign({ "textAlign": hasOnlyText && theme.windowInnerWidth >= breakpointsValues.sm
                ? "center"
                : undefined, "alignItems": hasOnlyText ? "center" : undefined, "flexDirection": "column" }, (function () {
            if (theme.windowInnerWidth < breakpointsValues.md) {
                return undefined;
            }
            return {
                "maxWidth": 800,
            };
        })()), { "display": "flex" }), (function () {
            var value = theme.spacing(7);
            if (theme.windowInnerWidth >= breakpointsValues.md) {
                return {
                    "marginRight": hasOnlyText ? undefined : value,
                };
            }
            return {
                "marginBottom": value,
            };
        })()),
        "illustrationWrapper": {},
        "illustration": {
            "display": "inline-block",
            "width": "100%",
        },
        "linkToSectionBelowWrapper": {
            "display": "flex",
            "justifyContent": "center",
            "transition": "opacity 300ms",
            "opacity": isImageLoaded ? 1 : 0,
        },
    });
});
//# sourceMappingURL=GlHero.js.map