"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 __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 (_) 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlHero = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable @typescript-eslint/no-namespace */
/* eslint-disable @typescript-eslint/ban-types */
var theme_1 = require("./theme");
var GlImage_1 = require("./utils/GlImage");
var react_1 = require("react");
var theme_2 = require("./theme");
var onyxia_ui_1 = require("onyxia-ui");
var framer_motion_1 = require("framer-motion");
var theme_3 = require("./theme");
var GlArrow_1 = require("./utils/GlArrow");
var GlTemplate_1 = require("./GlTemplate");
var useConstCallback_1 = require("powerhooks/useConstCallback");
var tss_react_1 = require("tss-react");
exports.GlHero = (0, react_1.memo)(function (props) {
    var title = props.title, subTitle = props.subTitle, className = props.className, imageSrc = props.imageSrc, linkToSectionBelowId = props.linkToSectionBelowId, hasImageShadow = props.hasImageShadow, imageSources = props.imageSources;
    var _a = __read((0, react_1.useReducer)(function (x) { return x + 1; }, 0), 2), forceUpdate = _a[1];
    var _b = __read((0, react_1.useState)(false), 2), isImageLoaded = _b[0], setIsImageLoaded = _b[1];
    var isShown = GlTemplate_1.splashScreenState.isShown;
    var handleOnImageLoad = (0, useConstCallback_1.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 textWrapperVariant = (0, react_1.useMemo)(function () { return ({
        "show": {},
        "hidden": { "opacity": 0 },
    }); }, []);
    var textVariant = (0, react_1.useMemo)(function () { return ({
        "show": {},
        "hidden": {
            "x": -150,
            "opacity": 0,
        },
    }); }, []);
    var imageAnimProps = (0, react_1.useMemo)(function () { return ({
        "transition": {
            "delay": 1,
            "duration": 0.5,
        },
        "initial": {
            "opacity": 0,
        },
        "animate": {},
    }); }, []);
    var animate = (0, useConstCallback_1.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,
        };
        GlTemplate_1.splashScreenState.isShown = false;
        forceUpdate();
    });
    (0, onyxia_ui_1.useSplashScreen)({
        "onHidden": function () {
            animate();
            GlTemplate_1.splashScreenState.isShown = false;
        },
    });
    (0, react_1.useEffect)(function () {
        if (isShown) {
            return;
        }
        animate();
    }, []);
    var _c = useStyles({
        "hasOnlyText": imageSrc === undefined,
        isImageLoaded: isImageLoaded,
    }), classes = _c.classes, cx = _c.cx;
    classes = (0, tss_react_1.useMergedClasses)(classes, props.classes);
    return ((0, jsx_runtime_1.jsxs)("section", __assign({ className: cx(classes.root, className) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: classes.textAndImageWrapper }, { children: [(title !== undefined || subTitle !== undefined) && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, __assign({ variants: textWrapperVariant, initial: "hidden", animate: "show", className: classes.textWrapper }, { children: [title !== undefined && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, __assign({ variants: textVariant }, { children: (0, jsx_runtime_1.jsx)(HeroText, __assign({ className: classes.title }, { children: title }), void 0) }), void 0)), subTitle !== undefined && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, __assign({ variants: textVariant }, { children: (0, jsx_runtime_1.jsx)(theme_1.Text, __assign({ typo: "subtitle", className: classes.subtitle }, { children: subTitle }), void 0) }), void 0))] }), void 0)), imageSrc !== undefined && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, __assign({}, imageAnimProps, { className: classes.imageWrapper }, { children: (0, jsx_runtime_1.jsx)(GlImage_1.GlImage, { className: classes.image, hasShadow: hasImageShadow, url: imageSrc, alt: "hero image", imageSources: imageSources, onLoad: handleOnImageLoad }, void 0) }), void 0))] }), void 0), linkToSectionBelowId !== undefined && ((0, jsx_runtime_1.jsx)("div", __assign({ className: classes.linkToSectionBelowWrapper }, { children: (0, jsx_runtime_1.jsx)(GlArrow_1.GlArrow, { className: classes.arrow, direction: "down", hasCircularBorder: true, link: {
                        "href": "#".concat(linkToSectionBelowId),
                    } }, void 0) }), void 0))] }), void 0));
});
var useStyles = (0, theme_2.makeStyles)({ "name": { GlHero: exports.GlHero } })(function (theme, _a) {
    var hasOnlyText = _a.hasOnlyText, isImageLoaded = _a.isImageLoaded;
    return ({
        "root": {
            "position": "relative",
            "width": "100%",
            "paddingBottom": theme.spacing(7),
        },
        "arrow": {
            "cursor": "pointer",
        },
        "textAndImageWrapper": __assign(__assign({ "padding": theme.spacing({
                "topBottom": 5,
                "rightLeft": 0,
            }), "minHeight": (window.innerHeight / 100) * 70, "display": "flex", "alignItems": "center", "justifyContent": "center" }, (theme.windowInnerWidth < theme_3.breakpointsValues.md
            ? {
                "flexDirection": "column",
                "alignItems": "left",
            }
            : {})), { "marginBottom": theme.spacing(6) }),
        "title": {
            "marginBottom": theme.spacing(4),
        },
        "subtitle": __assign({ "marginTop": theme.spacing(4), "maxWidth": 650, "color": theme.colors.useCases.typography.textSecondary }, (function () {
            if (theme.windowInnerWidth >= theme_3.breakpointsValues["lg+"]) {
                return undefined;
            }
            return theme.typography.variants["body 1"].style;
        })()),
        "textWrapper": __assign({ "textAlign": hasOnlyText && theme.windowInnerWidth >= theme_3.breakpointsValues.sm
                ? "center"
                : undefined, "display": "flex", "alignItems": hasOnlyText ? "center" : undefined, "flexDirection": "column", "flex": 1, "maxWidth": 1000 }, (function () {
            var value = theme.spacing(7);
            if (theme.windowInnerWidth >= theme_3.breakpointsValues.md) {
                return {
                    "marginRight": hasOnlyText ? undefined : value,
                };
            }
            return {
                "marginBottom": value,
            };
        })()),
        "imageWrapper": __assign({ "position": "relative", "flex": 1.5, "maxWidth": 800 }, (theme.windowInnerWidth < theme_3.breakpointsValues.md
            ? {
                "maxWidth": theme_3.breakpointsValues.md,
            }
            : {})),
        "image": {
            "width": "100%",
        },
        "linkToSectionBelowWrapper": {
            "display": "flex",
            "justifyContent": "center",
            "transition": "opacity 300ms",
            "opacity": isImageLoaded ? 1 : 0,
        },
    });
});
var HeroText = (function () {
    var HeroText = (0, react_1.memo)(function (props) {
        var children = props.children, className = props.className;
        var _a = useStyles(), classes = _a.classes, cx = _a.cx;
        return ((0, jsx_runtime_1.jsx)(theme_1.Text, __assign({ className: cx(classes.root, className), htmlComponent: "h1", typo: "body 1" }, { children: children }), void 0));
    });
    var useStyles = (0, theme_2.makeStyles)({ "name": { HeroText: HeroText } })(function (theme) { return ({
        "root": __assign({ "fontWeight": 700 }, (function () {
            var value = (theme.typography.rootFontSizePx / 16) *
                (function () {
                    if (theme.windowInnerWidth >= theme_3.breakpointsValues.xl) {
                        return 86;
                    }
                    if (theme.windowInnerWidth >= 600) {
                        return 52;
                    }
                    return 36;
                })();
            return {
                "fontSize": value,
                "lineHeight": "".concat(value, "px"),
            };
        })()),
    }); });
    return { HeroText: HeroText };
})().HeroText;
//# sourceMappingURL=GlHero.js.map