import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useEffect, useReducer, useState } from "react";
import { Stackscreencontext, reducer } from "../contexts/Stackscreencontext";
import back_icon from '../assets/images/back.png';
const Stackscreen = (props) => {
    const [screens, dispatch] = useReducer(reducer, props.screens);
    return (_jsx(Stackscreencontext.Provider, { value: { screens: screens, screensHandler: dispatch, eventHandler: props.eventHandler }, children: _jsx("div", { className: "stackscreen-wrapper", style: props.styles?.wrapper, children: screens.map((screen, i) => _jsx(Screen, { screen: screen, style: props.styles?.screen, index: i })) }) }));
};
const Screen = (props) => {
    let Component = props.screen.component;
    const [x, setX] = useState(1);
    const stackContext = useContext(Stackscreencontext);
    useEffect(() => {
        setX(0);
    }, []);
    const back = () => {
        setX(1);
        setTimeout(() => {
            stackContext ? stackContext?.screensHandler({ type: "remove", payload: props.screen.id }) : null;
        }, 200);
    };
    return (_jsxs("div", { className: "stackscreen-screen-wrapper", style: { ...props.style, transform: "translateX(" + ((100 * x).toString() + "%") + ")" }, children: [props.index != 0
                ?
                    _jsx("button", { onClick: back, className: "button-transparent", style: { display: "flex", alignSelf: "flex-start" }, children: _jsx("img", { src: back_icon, className: "stackscreen-screen-back" }) })
                :
                    null, _jsx("div", { className: "stackscreen-screen-subwrapper", children: Component
                    ?
                        _jsx(Component, { initialState: props.screen.initialState, data: props.screen.data })
                    :
                        null })] }, props.screen.id));
};
export default Stackscreen;
//# sourceMappingURL=Stackscreen.js.map