"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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlYoutubeVideoSection = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var theme_1 = require("./theme");
var useDomRect_1 = require("powerhooks/useDomRect");
var framer_motion_1 = require("framer-motion");
var useIntersectionObserver_1 = require("./tools/useIntersectionObserver");
var tss_react_1 = require("tss-react");
exports.GlYoutubeVideoSection = (0, react_1.memo)(function (props) {
    var className = props.className, link = props.link, src = props.src, title = props.title, width = props.width, height = props.height, buttonLabel = props.buttonLabel, classesProp = props.classes, hasAnimation = props.hasAnimation;
    var _a = __read((0, react_1.useReducer)(function (x) { return x + 1; }, 0), 2), forceUpdate = _a[1];
    var _b = (0, useDomRect_1.useDomRect)(), iframeWidth = _b.domRect.width, iframeRef = _b.ref;
    var animationProps = (0, react_1.useMemo)(function () {
        if (hasAnimation === undefined ||
            !hasAnimation ||
            src === undefined) {
            return undefined;
        }
        return {
            "initial": {
                "opacity": 0,
            },
            "animate": {},
            "transition": {
                "duration": 1,
                "ease": "easeOut",
            },
        };
    }, []);
    var ref = (0, useIntersectionObserver_1.useIntersectionObserver)({
        "callback": function (_a) {
            var entry = _a.entry, observer = _a.observer;
            if (hasAnimation === undefined ||
                !hasAnimation ||
                animationProps === undefined) {
                observer.unobserve(entry.target);
                return;
            }
            if (entry.isIntersecting) {
                animationProps.animate = {
                    "opacity": 1,
                };
                observer.unobserve(entry.target);
                forceUpdate();
            }
        },
        "threshold": 0.5,
    }).ref;
    var _c = useStyles({
        width: width,
        height: height,
        "currentWidth": iframeWidth,
    }), classes = _c.classes, cx = _c.cx;
    classes = (0, tss_react_1.useMergedClasses)(classes, classesProp);
    return ((0, jsx_runtime_1.jsxs)("section", __assign({ ref: ref, className: cx(classes.root, className) }, { children: [title !== undefined && ((0, jsx_runtime_1.jsx)(theme_1.Text, __assign({ className: classes.title, typo: "page heading" }, { children: title }), void 0)), src !== undefined && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.iframe, __assign({}, animationProps, { ref: iframeRef, className: classes.iframe, src: src, title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }), void 0)), buttonLabel !== undefined && ((0, jsx_runtime_1.jsx)(theme_1.Button, __assign({ onClick: link === null || link === void 0 ? void 0 : link.onClick, className: classes.button, href: link === null || link === void 0 ? void 0 : link.href, type: "submit", variant: "secondary" }, { children: buttonLabel }), void 0))] }), void 0));
});
var useStyles = (0, theme_1.makeStyles)({ "name": { GlYoutubeVideoSection: exports.GlYoutubeVideoSection } })(function (theme, _a) {
    var height = _a.height, width = _a.width, currentWidth = _a.currentWidth;
    return ({
        "root": {
            "display": "grid",
            "gridTemplateColumns": "1fr",
            "justifyItems": "center",
        },
        "title": {
            "textAlign": "center",
        },
        "iframe": __assign(__assign({ "border": "none" }, theme.spacing.topBottom("margin", "".concat(theme.spacing(7), "px"))), { "boxShadow": theme.customShadow, "width": width !== null && width !== void 0 ? width : (function () {
                if (theme.windowInnerWidth >= theme_1.breakpointsValues.md) {
                    return 700;
                }
                if (theme.windowInnerWidth >= theme_1.breakpointsValues.sm) {
                    return "70%";
                }
                return "100%";
            })(), "height": height !== null && height !== void 0 ? height : (function () {
                if (theme.windowInnerWidth >= theme_1.breakpointsValues.md) {
                    return 7 * 60;
                }
                return (currentWidth / 100) * 60;
            })() }),
        "button": {},
    });
});
//# sourceMappingURL=GlYoutubeVideoSection.js.map