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 { Container } from './styles';
import { FiArrowLeft } from '../../../assets/icons';
import { ModalContext } from '../Context';
import Slider from 'react-slick';
import logo from '../../../assets/images/Logo.png';
import titleImage from '../../../assets/images/Título inicial.png';
import cardSlider1 from '../../../assets/images/Tutorial 1.png';
import cardSlider2 from '../../../assets/images/Tutorial 2.png';
import cardSlider3 from '../../../assets/images/Tutorial 3.png';
import background1 from '../../../assets/images/bg1.jpg';
import background2 from '../../../assets/images/bg2.png';
const InstructionsMolduraMinuto = (_a) => {
    var { onOpen, activateAR } = _a, arProps = __rest(_a, ["onOpen", "activateAR"]);
    const { closeModal } = useContext(ModalContext);
    const [sliderOpen, openSlider] = useState(false);
    const [disabled, disableButton] = useState(false);
    let slider;
    useEffect(onOpen, []);
    document.addEventListener('visibilitychange', () => closeModal(), {
        once: true,
    });
    window.addEventListener('hashchange', () => closeModal(), { once: true });
    const settings = {
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        style: {
            position: 'relative',
            margin: 'auto',
            top: '50%',
            msTransform: 'translateY(-50%)',
            transform: 'translateY(-50%)',
        },
    };
    const next = () => {
        slider === null || slider === void 0 ? void 0 : slider.slickNext();
        console.log(slider);
    };
    return (React.createElement(React.Fragment, null,
        React.createElement("link", { rel: "stylesheet", type: "text/css", href: "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" }),
        React.createElement("link", { rel: "stylesheet", type: "text/css", href: "https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" }),
        React.createElement(Container, { background: sliderOpen ? background2 : background1 },
            React.createElement("div", { style: { width: '100vw', position: 'absolute', top: '6vh' } }, !sliderOpen && (React.createElement("img", { src: titleImage, alt: "Realidade Aumentada", style: {
                    width: '60vw',
                    display: 'block',
                    margin: 'auto',
                    maxHeight: '12vh',
                } }))),
            sliderOpen && (React.createElement(Slider, Object.assign({ ref: (ref) => {
                    slider = ref;
                } }, settings),
                React.createElement("div", { className: "slide" },
                    React.createElement("img", { src: cardSlider1, alt: "Tutorial 1" }),
                    React.createElement("button", { className: "red-button next", onClick: next }, "Pr\u00F3ximo")),
                React.createElement("div", { className: "slide" },
                    React.createElement("img", { src: cardSlider2, alt: "Tutorial 2" }),
                    React.createElement("button", { className: "red-button next", onClick: next }, "Pr\u00F3ximo")),
                React.createElement("div", { className: "slide" },
                    React.createElement("img", { src: cardSlider3, alt: "Tutorial 3" }),
                    React.createElement("button", { className: "red-button next", disabled: disabled, onClick: () => {
                            disableButton(true);
                            activateAR(arProps);
                        } }, disabled ? 'Carregando...' : 'Começar!')))),
            !sliderOpen && (React.createElement("button", { className: "red-button", style: {
                    msTransform: 'translateY(-50%)',
                    transform: 'translateY(-50%)',
                    position: 'absolute',
                    bottom: '22vh',
                    left: '25vw',
                    display: sliderOpen ? 'hidden' : 'auto',
                }, onClick: () => {
                    openSlider(true);
                } }, "Veja como usar")),
            React.createElement("div", { style: { width: '100vw', position: 'absolute', bottom: '14vh' } }, !sliderOpen && (React.createElement("img", { src: logo, alt: "Logo", style: {
                    width: '50vw',
                    display: 'block',
                    margin: 'auto',
                    maxHeight: '9vh',
                } }))),
            React.createElement(FiArrowLeft, { width: 40, height: 40, color: "#505050", cursor: "pointer", className: "exit", onClick: closeModal, style: {
                    position: 'absolute',
                    top: '10px',
                    left: '10px',
                } }))));
};
export default InstructionsMolduraMinuto;
//# sourceMappingURL=index.js.map