var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useContext, useEffect, useState } from 'react';
import { FiArrowLeft } from '../../../assets/icons';
import { Content } from './styles';
import Canvas from '../Canvas';
import { ModalContext } from '../Context';
import translationsEN from '../../../locales/en/translation.json';
const InstructionsYDigitalVideo = (_a) => {
    var { hasWaterMark = true, onOpen, activateAR } = _a, arProps = __rest(_a, ["hasWaterMark", "onOpen", "activateAR"]);
    const { closeModal } = useContext(ModalContext);
    const [disabled, setDisabled] = useState(false);
    useEffect(onOpen, []);
    document.addEventListener('visibilitychange', () => closeModal(), {
        once: true,
    });
    window.addEventListener('hashchange', () => closeModal(), { once: true });
    const buttonText = 'Start the experience';
    return (React.createElement(Canvas, null,
        React.createElement(Content, null,
            React.createElement(FiArrowLeft, { width: 30, height: 30, color: "#707070", cursor: "pointer", className: "exit", onClick: closeModal }),
            React.createElement("a", { href: "https://r2u.io", className: "powered", target: "_blank", rel: "noopener noreferrer", style: { visibility: hasWaterMark ? undefined : 'hidden' } },
                React.createElement("h1", null, translationsEN.poweredBy),
                React.createElement("img", { src: "https://sdk.r2u.io/assets/r2u-full-white-logo.png", alt: "", className: "icon" })),
            React.createElement("div", { className: `instructions ${!hasWaterMark && 'no-watermark'}` },
                React.createElement("div", { className: "border" },
                    React.createElement("video", { autoPlay: true, muted: true, loop: true, playsInline: true, style: { width: '100%', height: 'auto' } },
                        React.createElement("source", { src: "https://storage.googleapis.com/r2u-integrations-bucket/y-digital/V-UP.mp4", type: "video/mp4" })))),
            React.createElement("button", { type: "button", className: "ar-button", disabled: disabled, onClick: () => {
                    activateAR(arProps);
                    setDisabled(true);
                } }, disabled ? (React.createElement("span", null, translationsEN.instructions.loading)) : (React.createElement("span", null, buttonText))))));
};
export default InstructionsYDigitalVideo;
//# sourceMappingURL=index.js.map