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;
};
/* eslint-disable react/jsx-no-literals */
import React, { useContext, useEffect, useState } from 'react';
import Canvas from '../Canvas';
import { Container } from './styles';
import { AmericanasLogo } from '../../../assets/icons';
import { ModalContext } from '../Context';
import Fonts from '../../../fonts';
const InstructionsAmericanas = (_a) => {
    var { onOpen, activateAR } = _a, arProps = __rest(_a, ["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 });
    return (React.createElement(Canvas, { color: "#F1F1F1" },
        React.createElement(Fonts, null),
        React.createElement(Container, null,
            React.createElement("div", { className: "logo" },
                React.createElement(AmericanasLogo, null)),
            React.createElement("div", { className: "instructions" },
                React.createElement("img", { src: "https://sdk.r2u.io/assets/instruction-cover.jpg", alt: "", className: "example" }),
                React.createElement("div", { className: "instructions-column" },
                    React.createElement("div", { className: "instruction-unit" },
                        React.createElement("img", { src: "https://sdk.r2u.io/assets/instruction-hand-move.png", alt: "", className: "icon" }),
                        React.createElement("span", null, "segure e arraste o produto para mover")),
                    React.createElement("div", { className: "instruction-unit" },
                        React.createElement("img", { src: "https://sdk.r2u.io/assets/instruction-hand-rotate.png", alt: "", className: "icon" }),
                        React.createElement("span", null, "segure o produto com dois dedos para girar")))),
            React.createElement("div", { className: "footer" },
                React.createElement("span", null, "coloque o produto em seu espa\u00E7o para verificar todas as dimens\u00F5es"),
                React.createElement("button", { type: "button", className: "ar-button", disabled: disabled, onClick: () => {
                        activateAR(arProps);
                        setDisabled(true);
                    } }, disabled ? (React.createElement("span", null, "carregando ...")) : (React.createElement("span", null, "veja como fica no seu espa\u00E7o")))))));
};
export default InstructionsAmericanas;
//# sourceMappingURL=index.js.map