import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default, { useState, useLayoutEffect, useEffect, useMemo, useRef } from 'react';
import classnames from 'classnames';
import { isPresent, capitalize, noop, findIndexBy } from '@bigbinary/neeto-cist';
import Stepper from '@bigbinary/neetoui/Stepper';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
import Button from '@bigbinary/neetoui/Button';
import Typography from '@bigbinary/neetoui/Typography';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useTranslation, Trans } from 'react-i18next';
import { t } from 'i18next';
import useBreakpoints from '@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints';
import RightArrow from '@bigbinary/neeto-icons/RightArrow';
import { n } from './inject-css-C2dztUxs.js';
import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';

// t: current time, b: beginning value, _c: final value, d: total duration
var tweenFunctions = {
  linear: function(t, b, _c, d) {
    var c = _c - b;
    return c * t / d + b;
  },
  easeInQuad: function(t, b, _c, d) {
    var c = _c - b;
    return c * (t /= d) * t + b;
  },
  easeOutQuad: function(t, b, _c, d) {
    var c = _c - b;
    return -c * (t /= d) * (t - 2) + b;
  },
  easeInOutQuad: function(t, b, _c, d) {
    var c = _c - b;
    if ((t /= d / 2) < 1) {
      return c / 2 * t * t + b;
    } else {
      return -c / 2 * ((--t) * (t - 2) - 1) + b;
    }
  },
  easeInCubic: function(t, b, _c, d) {
    var c = _c - b;
    return c * (t /= d) * t * t + b;
  },
  easeOutCubic: function(t, b, _c, d) {
    var c = _c - b;
    return c * ((t = t / d - 1) * t * t + 1) + b;
  },
  easeInOutCubic: function(t, b, _c, d) {
    var c = _c - b;
    if ((t /= d / 2) < 1) {
      return c / 2 * t * t * t + b;
    } else {
      return c / 2 * ((t -= 2) * t * t + 2) + b;
    }
  },
  easeInQuart: function(t, b, _c, d) {
    var c = _c - b;
    return c * (t /= d) * t * t * t + b;
  },
  easeOutQuart: function(t, b, _c, d) {
    var c = _c - b;
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
  },
  easeInOutQuart: function(t, b, _c, d) {
    var c = _c - b;
    if ((t /= d / 2) < 1) {
      return c / 2 * t * t * t * t + b;
    } else {
      return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
    }
  },
  easeInQuint: function(t, b, _c, d) {
    var c = _c - b;
    return c * (t /= d) * t * t * t * t + b;
  },
  easeOutQuint: function(t, b, _c, d) {
    var c = _c - b;
    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
  },
  easeInOutQuint: function(t, b, _c, d) {
    var c = _c - b;
    if ((t /= d / 2) < 1) {
      return c / 2 * t * t * t * t * t + b;
    } else {
      return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
    }
  },
  easeInSine: function(t, b, _c, d) {
    var c = _c - b;
    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
  },
  easeOutSine: function(t, b, _c, d) {
    var c = _c - b;
    return c * Math.sin(t / d * (Math.PI / 2)) + b;
  },
  easeInOutSine: function(t, b, _c, d) {
    var c = _c - b;
    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
  },
  easeInExpo: function(t, b, _c, d) {
    var c = _c - b;
    return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
  },
  easeOutExpo: function(t, b, _c, d) {
    var c = _c - b;
    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
  },
  easeInOutExpo: function(t, b, _c, d) {
    var c = _c - b;
    if (t === 0) {
      return b;
    }
    if (t === d) {
      return b + c;
    }
    if ((t /= d / 2) < 1) {
      return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
    } else {
      return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
    }
  },
  easeInCirc: function(t, b, _c, d) {
    var c = _c - b;
    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
  },
  easeOutCirc: function(t, b, _c, d) {
    var c = _c - b;
    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
  },
  easeInOutCirc: function(t, b, _c, d) {
    var c = _c - b;
    if ((t /= d / 2) < 1) {
      return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
    } else {
      return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
    }
  },
  easeInElastic: function(t, b, _c, d) {
    var c = _c - b;
    var a, p, s;
    s = 1.70158;
    p = 0;
    a = c;
    if (t === 0) {
      return b;
    } else if ((t /= d) === 1) {
      return b + c;
    }
    if (!p) {
      p = d * 0.3;
    }
    if (a < Math.abs(c)) {
      a = c;
      s = p / 4;
    } else {
      s = p / (2 * Math.PI) * Math.asin(c / a);
    }
    return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
  },
  easeOutElastic: function(t, b, _c, d) {
    var c = _c - b;
    var a, p, s;
    s = 1.70158;
    p = 0;
    a = c;
    if (t === 0) {
      return b;
    } else if ((t /= d) === 1) {
      return b + c;
    }
    if (!p) {
      p = d * 0.3;
    }
    if (a < Math.abs(c)) {
      a = c;
      s = p / 4;
    } else {
      s = p / (2 * Math.PI) * Math.asin(c / a);
    }
    return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
  },
  easeInOutElastic: function(t, b, _c, d) {
    var c = _c - b;
    var a, p, s;
    s = 1.70158;
    p = 0;
    a = c;
    if (t === 0) {
      return b;
    } else if ((t /= d / 2) === 2) {
      return b + c;
    }
    if (!p) {
      p = d * (0.3 * 1.5);
    }
    if (a < Math.abs(c)) {
      a = c;
      s = p / 4;
    } else {
      s = p / (2 * Math.PI) * Math.asin(c / a);
    }
    if (t < 1) {
      return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    } else {
      return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
    }
  },
  easeInBack: function(t, b, _c, d, s) {
    var c = _c - b;
    if (s === void 0) {
      s = 1.70158;
    }
    return c * (t /= d) * t * ((s + 1) * t - s) + b;
  },
  easeOutBack: function(t, b, _c, d, s) {
    var c = _c - b;
    if (s === void 0) {
      s = 1.70158;
    }
    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
  },
  easeInOutBack: function(t, b, _c, d, s) {
    var c = _c - b;
    if (s === void 0) {
      s = 1.70158;
    }
    if ((t /= d / 2) < 1) {
      return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
    } else {
      return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
    }
  },
  easeInBounce: function(t, b, _c, d) {
    var c = _c - b;
    var v;
    v = tweenFunctions.easeOutBounce(d - t, 0, c, d);
    return c - v + b;
  },
  easeOutBounce: function(t, b, _c, d) {
    var c = _c - b;
    if ((t /= d) < 1 / 2.75) {
      return c * (7.5625 * t * t) + b;
    } else if (t < 2 / 2.75) {
      return c * (7.5625 * (t -= 1.5 / 2.75) * t + 0.75) + b;
    } else if (t < 2.5 / 2.75) {
      return c * (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375) + b;
    } else {
      return c * (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375) + b;
    }
  },
  easeInOutBounce: function(t, b, _c, d) {
    var c = _c - b;
    var v;
    if (t < d / 2) {
      v = tweenFunctions.easeInBounce(t * 2, 0, c, d);
      return v * 0.5 + b;
    } else {
      v = tweenFunctions.easeOutBounce(t * 2 - d, 0, c, d);
      return v * 0.5 + c * 0.5 + b;
    }
  }
};

var tweenFunctions_1 = tweenFunctions;

function degreesToRads(degrees) {
    return (degrees * Math.PI) / 180;
}
function randomRange(min, max) {
    return min + Math.random() * (max - min);
}
function randomInt(min, max) {
    return Math.floor(min + Math.random() * (max - min + 1));
}

var ParticleShape;
(function (ParticleShape) {
    ParticleShape[ParticleShape["Circle"] = 0] = "Circle";
    ParticleShape[ParticleShape["Square"] = 1] = "Square";
    ParticleShape[ParticleShape["Strip"] = 2] = "Strip";
})(ParticleShape || (ParticleShape = {}));
var RotationDirection;
(function (RotationDirection) {
    RotationDirection[RotationDirection["Positive"] = 1] = "Positive";
    RotationDirection[RotationDirection["Negative"] = -1] = "Negative";
})(RotationDirection || (RotationDirection = {}));
const DEFAULT_FRAME_TIME = 1000 / 60;
class Particle {
    constructor(context, getOptions, x, y) {
        this.getOptions = getOptions;
        const { colors, initialVelocityX, initialVelocityY } = this.getOptions();
        this.context = context;
        this.x = x;
        this.y = y;
        this.w = randomRange(5, 20);
        this.h = randomRange(5, 20);
        this.radius = randomRange(5, 10);
        this.vx =
            typeof initialVelocityX === 'number'
                ? randomRange(-initialVelocityX, initialVelocityX)
                : randomRange(initialVelocityX.min, initialVelocityX.max);
        this.vy =
            typeof initialVelocityY === 'number'
                ? randomRange(-initialVelocityY, 0)
                : randomRange(initialVelocityY.min, initialVelocityY.max);
        this.shape = randomInt(0, 2);
        this.angle = degreesToRads(randomRange(0, 360));
        this.angularSpin = randomRange(-0.2, 0.2);
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.rotateY = randomRange(0, 1);
        this.rotationDirection = randomRange(0, 1)
            ? RotationDirection.Positive
            : RotationDirection.Negative;
    }
    update(elapsed) {
        const { gravity, wind, friction, opacity, drawShape } = this.getOptions();
        const frameTimeMultiplier = elapsed / DEFAULT_FRAME_TIME;
        this.x += this.vx * frameTimeMultiplier;
        this.y += this.vy * frameTimeMultiplier;
        this.vy += gravity * frameTimeMultiplier;
        this.vx += wind * frameTimeMultiplier;
        this.vx *= friction ** frameTimeMultiplier;
        this.vy *= friction ** frameTimeMultiplier;
        if (this.rotateY >= 1 &&
            this.rotationDirection === RotationDirection.Positive) {
            this.rotationDirection = RotationDirection.Negative;
        }
        else if (this.rotateY <= -1 &&
            this.rotationDirection === RotationDirection.Negative) {
            this.rotationDirection = RotationDirection.Positive;
        }
        const rotateDelta = 0.1 * this.rotationDirection * frameTimeMultiplier;
        this.rotateY += rotateDelta;
        this.angle += this.angularSpin;
        this.context.save();
        this.context.translate(this.x, this.y);
        this.context.rotate(this.angle);
        this.context.scale(1, this.rotateY);
        this.context.rotate(this.angle);
        this.context.beginPath();
        this.context.fillStyle = this.color;
        this.context.strokeStyle = this.color;
        this.context.globalAlpha = opacity;
        this.context.lineCap = 'round';
        this.context.lineWidth = 2;
        if (drawShape && typeof drawShape === 'function') {
            drawShape.call(this, this.context);
        }
        else {
            switch (this.shape) {
                case ParticleShape.Circle: {
                    this.context.beginPath();
                    this.context.arc(0, 0, this.radius, 0, 2 * Math.PI);
                    this.context.fill();
                    break;
                }
                case ParticleShape.Square: {
                    this.context.fillRect(-this.w / 2, -this.h / 2, this.w, this.h);
                    break;
                }
                case ParticleShape.Strip: {
                    this.context.fillRect(-this.w / 6, -this.h / 2, this.w / 3, this.h);
                    break;
                }
            }
        }
        this.context.closePath();
        this.context.restore();
    }
}

class ParticleGenerator {
    constructor(canvas, getOptions) {
        this.x = 0;
        this.y = 0;
        this.w = 0;
        this.h = 0;
        this.lastNumberOfPieces = 0;
        this.tweenProgress = 0;
        this.tweenFrom = 0;
        this.particles = [];
        this.particlesGenerated = 0;
        this.removeParticleAt = (i) => {
            this.particles.splice(i, 1);
        };
        this.getParticle = () => {
            const newParticleX = randomRange(this.x, this.w + this.x);
            const newParticleY = randomRange(this.y, this.h + this.y);
            return new Particle(this.context, this.getOptions, newParticleX, newParticleY);
        };
        this.animate = (elapsed) => {
            const { canvas, context, particlesGenerated, lastNumberOfPieces } = this;
            const { run, recycle, numberOfPieces, debug, tweenFunction, tweenDuration, } = this.getOptions();
            if (!run) {
                return false;
            }
            const nP = this.particles.length;
            const activeCount = recycle ? nP : particlesGenerated;
            // Initial population
            if (activeCount < numberOfPieces) {
                // Use the numberOfPieces prop as a key to reset the easing timing
                if (lastNumberOfPieces !== numberOfPieces) {
                    this.tweenProgress = 0;
                    this.tweenFrom = activeCount;
                    this.lastNumberOfPieces = numberOfPieces;
                }
                // Clamp tweenProgress between 0 and tweenDuration
                this.tweenProgress = Math.min(tweenDuration, Math.max(0, this.tweenProgress + elapsed));
                const tweenedVal = tweenFunction(this.tweenProgress, this.tweenFrom, numberOfPieces, tweenDuration);
                const numToAdd = Math.round(tweenedVal - activeCount);
                for (let i = 0; i < numToAdd; i++) {
                    this.particles.push(this.getParticle());
                }
                this.particlesGenerated += numToAdd;
            }
            if (debug) {
                // Draw debug text
                context.font = '12px sans-serif';
                context.fillStyle = '#333';
                context.textAlign = 'right';
                context.fillText(`Particles: ${nP}`, canvas.width - 10, canvas.height - 20);
            }
            // Maintain the population, iterating backwards to prevent issues when removing particles
            for (let i = this.particles.length - 1; i >= 0; i--) {
                const p = this.particles[i];
                // Update each particle's position
                p.update(elapsed);
                // Prune the off-canvas particles
                if (p.y > canvas.height ||
                    p.y < -100 ||
                    p.x > canvas.width + 100 ||
                    p.x < -100) {
                    if (recycle && activeCount <= numberOfPieces) {
                        // Replace the particle with a brand new one
                        this.particles[i] = this.getParticle();
                    }
                    else {
                        this.removeParticleAt(i);
                    }
                }
            }
            return nP > 0 || activeCount < numberOfPieces;
        };
        this.canvas = canvas;
        const ctx = this.canvas.getContext('2d');
        if (!ctx) {
            throw new Error('Could not get canvas context');
        }
        this.context = ctx;
        this.getOptions = getOptions;
    }
}

const confettiDefaults = {
    width: typeof window !== 'undefined' ? window.innerWidth : 300,
    height: typeof window !== 'undefined' ? window.innerHeight : 200,
    numberOfPieces: 200,
    friction: 0.99,
    wind: 0,
    gravity: 0.1,
    initialVelocityX: 4,
    initialVelocityY: 10,
    colors: [
        '#f44336',
        '#e91e63',
        '#9c27b0',
        '#673ab7',
        '#3f51b5',
        '#2196f3',
        '#03a9f4',
        '#00bcd4',
        '#009688',
        '#4CAF50',
        '#8BC34A',
        '#CDDC39',
        '#FFEB3B',
        '#FFC107',
        '#FF9800',
        '#FF5722',
        '#795548',
    ],
    opacity: 1.0,
    debug: false,
    tweenFunction: tweenFunctions_1.easeInOutQuad,
    tweenDuration: 5000,
    recycle: true,
    run: true,
};
class Confetti {
    constructor(canvas, opts) {
        this.lastFrameTime = 0;
        this.setOptionsWithDefaults = (opts) => {
            const computedConfettiDefaults = {
                confettiSource: {
                    x: 0,
                    y: 0,
                    w: this.canvas.width,
                    h: 0,
                },
            };
            this._options = {
                ...computedConfettiDefaults,
                ...confettiDefaults,
                ...opts,
            };
            Object.assign(this, opts.confettiSource);
        };
        this.update = (timestamp = 0) => {
            const { options: { run, onConfettiComplete, frameRate }, canvas, context, } = this;
            // Cap elapsed time to 50ms to prevent large time steps
            const elapsed = Math.min(timestamp - this.lastFrameTime, 50);
            // Throttle the frame rate if set
            if (frameRate && elapsed < 1000 / frameRate) {
                this.rafId = requestAnimationFrame(this.update);
                return;
            }
            this.lastFrameTime = timestamp - (frameRate ? elapsed % frameRate : 0);
            if (run) {
                context.fillStyle = 'white';
                context.clearRect(0, 0, canvas.width, canvas.height);
            }
            if (this.generator.animate(elapsed)) {
                this.rafId = requestAnimationFrame(this.update);
            }
            else {
                if (onConfettiComplete &&
                    typeof onConfettiComplete === 'function' &&
                    this.generator.particlesGenerated > 0) {
                    onConfettiComplete.call(this, this);
                }
                this._options.run = false;
            }
        };
        this.reset = () => {
            if (this.generator && this.generator.particlesGenerated > 0) {
                this.generator.particlesGenerated = 0;
                this.generator.particles = [];
                this.generator.lastNumberOfPieces = 0;
            }
        };
        this.stop = () => {
            this.options = { run: false };
            if (this.rafId) {
                cancelAnimationFrame(this.rafId);
                this.rafId = undefined;
            }
        };
        this.canvas = canvas;
        const ctx = this.canvas.getContext('2d');
        if (!ctx) {
            throw new Error('Could not get canvas context');
        }
        this.context = ctx;
        this.generator = new ParticleGenerator(this.canvas, () => this.options);
        this.options = opts;
        this.update();
    }
    get options() {
        return this._options;
    }
    set options(opts) {
        const lastRunState = this._options?.run;
        const lastRecycleState = this._options?.recycle;
        this.setOptionsWithDefaults(opts);
        if (this.generator) {
            Object.assign(this.generator, this.options.confettiSource);
            if (typeof opts.recycle === 'boolean' &&
                opts.recycle &&
                lastRecycleState === false) {
                this.generator.lastNumberOfPieces = this.generator.particles.length;
            }
        }
        if (typeof opts.run === 'boolean' && opts.run && lastRunState === false) {
            this.update();
        }
    }
}

const ref = React__default.createRef();
class ReactConfettiInternal extends React__default.Component {
    constructor(props) {
        super(props);
        this.canvas = React__default.createRef();
        this.canvas = props.canvasRef || ref;
    }
    componentDidMount() {
        if (this.canvas.current) {
            const opts = extractCanvasProps(this.props)[0];
            this.confetti = new Confetti(this.canvas.current, opts);
        }
    }
    componentDidUpdate() {
        const confettiOptions = extractCanvasProps(this.props)[0];
        if (this.confetti) {
            this.confetti.options = confettiOptions;
        }
    }
    componentWillUnmount() {
        if (this.confetti) {
            this.confetti.stop();
        }
        this.confetti = undefined;
    }
    render() {
        const [confettiOptions, passedProps] = extractCanvasProps(this.props);
        const canvasStyles = {
            zIndex: 2,
            position: 'absolute',
            pointerEvents: 'none',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            ...passedProps.style,
        };
        return (jsx("canvas", { width: confettiOptions.width, height: confettiOptions.height, ref: this.canvas, ...passedProps, style: canvasStyles }));
    }
}
ReactConfettiInternal.defaultProps = {
    ...confettiDefaults,
};
ReactConfettiInternal.displayName = 'ReactConfetti';
function extractCanvasProps(props) {
    const confettiOptions = {};
    const refs = {};
    const rest = {};
    const confettiOptionKeys = [
        ...Object.keys(confettiDefaults),
        'confettiSource',
        'drawShape',
        'onConfettiComplete',
        'frameRate',
    ];
    const refProps = ['canvasRef'];
    for (const prop in props) {
        const val = props[prop];
        if (confettiOptionKeys.includes(prop)) {
            confettiOptions[prop] = val;
        }
        else if (refProps.includes(prop)) {
            refProps[prop] = val;
        }
        else {
            rest[prop] = val;
        }
    }
    return [confettiOptions, rest, refs];
}
const ReactConfetti = React__default.forwardRef((props, ref) => jsx(ReactConfettiInternal, { canvasRef: ref, ...props }));

var GENERAL_ONBOARDING_STEPS = {
  WELCOME: "welcome",
  HELP: "help",
  FINISH: "finish"
};

var HelpScreen = function HelpScreen(_ref) {
  var setCurrentStep = _ref.setCurrentStep,
    helpScreenClassName = _ref.helpScreenClassName;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useBreakpoints = useBreakpoints(),
    isSize = _useBreakpoints.isSize;
  return /*#__PURE__*/jsxs("div", {
    className: classnames("mx-auto flex w-full max-w-3xl flex-col items-start gap-y-6 px-6 pb-6 pt-16", helpScreenClassName),
    children: [/*#__PURE__*/jsxs("div", {
      className: "flex flex-col gap-y-3",
      children: [/*#__PURE__*/jsx(Typography, {
        component: "h1",
        "data-testid": "onboarding-help-title",
        style: "h1",
        children: t("neetoMolecules.onboarding.helpScreen.title")
      }), /*#__PURE__*/jsx(Typography, {
        "data-testid": "onboarding-help-description",
        lineHeight: "normal",
        style: "body1",
        children: /*#__PURE__*/jsx(Trans, {
          i18nKey: "neetoMolecules.onboarding.helpScreen.description"
        })
      }), /*#__PURE__*/jsx("div", {
        className: "w-full pt-3",
        children: isSize("mobile") ? /*#__PURE__*/jsx("img", {
          alt: "",
          src: "https://ik.imagekit.io/d9mvewbju/Commons/NeetoMolecules/help-support-mobile_fgsI9Cx-IC.svg"
        }) : /*#__PURE__*/jsx("img", {
          alt: "",
          src: "https://ik.imagekit.io/d9mvewbju/Commons/NeetoMolecules/help-support-desktop_CSOh3DrKTR.svg"
        })
      })]
    }), /*#__PURE__*/jsx(Button, {
      "data-testid": "onboarding-help-button",
      icon: function icon() {
        return /*#__PURE__*/jsx(RightArrow, {
          className: "rtl:scale-x-[-1]",
          size: 16
        });
      },
      iconPosition: "right",
      label: t("neetoMolecules.onboarding.helpScreen.continueButton"),
      onClick: function onClick() {
        return setCurrentStep(GENERAL_ONBOARDING_STEPS.FINISH);
      }
    })]
  });
};

function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var createSteps = function createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName) {
  var helpStep = {
    key: GENERAL_ONBOARDING_STEPS.HELP,
    label: t("neetoMolecules.onboarding.helpLabel"),
    element: /*#__PURE__*/jsx(HelpScreen, {
      currentStep: currentStep,
      helpScreenClassName: helpScreenClassName,
      setCurrentStep: setCurrentStep
    })
  };
  return onboardingSteps.concat(helpStep).map(function (step, idx) {
    return _objectSpread$1(_objectSpread$1({}, step), {}, {
      id: idx + 1
    });
  });
};
var getWindowDimensions = function getWindowDimensions() {
  return typeof window !== "undefined" ? {
    width: window.innerWidth,
    height: window.innerHeight
  } : {
    width: 100,
    height: 100
  };
};

var useWindowDimensions = function useWindowDimensions() {
  var _useState = useState({
      width: 100,
      height: 100
    }),
    _useState2 = _slicedToArray(_useState, 2),
    windowDimensions = _useState2[0],
    setWindowDimensions = _useState2[1];
  useLayoutEffect(function () {
    setWindowDimensions(getWindowDimensions());
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }
    window.addEventListener("resize", handleResize);
    return function () {
      return window.removeEventListener("resize", handleResize);
    };
  }, []);
  return windowDimensions;
};

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CompletedScreen = function CompletedScreen(_ref) {
  var completeButtonProps = _ref.completeButtonProps,
    completedScreenSuccessMessage = _ref.completedScreenSuccessMessage,
    className = _ref.className;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    dropConfetti = _useState2[0],
    setDropConfetti = _useState2[1];
  var _useWindowDimensions = useWindowDimensions(),
    height = _useWindowDimensions.height,
    width = _useWindowDimensions.width;
  useEffect(function () {
    var timer = setTimeout(function () {
      return setDropConfetti(false);
    }, 10000);
    return function () {
      return clearTimeout(timer);
    };
  }, []);
  return /*#__PURE__*/jsxs("div", {
    className: classnames("neeto-molecules-onboarding__wrapper", className),
    "data-testid": "onboarding-congratulations-wrapper",
    children: [/*#__PURE__*/jsx(ReactConfetti, {
      height: height,
      width: width,
      recycle: dropConfetti
    }), isPresent(completedScreenSuccessMessage) ? completedScreenSuccessMessage : /*#__PURE__*/jsxs("div", {
      className: "mx-auto mb-6 flex w-full max-w-2xl flex-col gap-y-2 px-6 pt-16",
      children: [/*#__PURE__*/jsx(Typography, {
        className: "text-center",
        "data-testid": "onboarding-congratulations-emoji",
        style: "h1",
        children: "\uD83C\uDF89"
      }), /*#__PURE__*/jsxs(Typography, {
        className: "text-center",
        "data-testid": "onboarding-congratulations-title",
        style: "h1",
        children: [/*#__PURE__*/jsx("span", {
          className: "neeto-ui-text-success-500",
          children: t("neetoMolecules.onboarding.congratulations")
        }), /*#__PURE__*/jsx("br", {}), t("neetoMolecules.onboarding.readyToUse", {
          appName: capitalize(globalProps.appName)
        })]
      })]
    }), /*#__PURE__*/jsx(Button, _objectSpread({
      "data-testid": "onboarding-congratulations-button",
      label: t("neetoMolecules.onboarding.helpScreen.startUsingButton", {
        appName: globalProps.appName
      })
    }, completeButtonProps))]
  });
};

var css = ".neeto-molecules-onboarding__wrapper{align-items:center;flex-grow:1;padding:0}.neeto-molecules-onboarding__container,.neeto-molecules-onboarding__wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow-y:auto;width:100%}.neeto-molecules-onboarding__container{position:relative}.neeto-molecules-onboarding__stepper-wrapper{background-color:rgb(var(--neeto-ui-white));border-bottom:1px solid rgb(var(--neeto-ui-gray-200));display:flex;flex-shrink:0;padding:.5rem 1rem;width:100%}@media (min-width:1024px){.neeto-molecules-onboarding__stepper-wrapper{justify-content:center}}.neeto-molecules-onboarding__content{flex-grow:1;min-height:0;overflow-y:auto;width:100%}.neeto-molecules-onboarding__content--forward{animation:slideInRight .4s ease backwards}.neeto-molecules-onboarding__content--backward{animation:slideInLeft .4s ease backwards}@media (prefers-reduced-motion:reduce){.neeto-molecules-onboarding__content--backward,.neeto-molecules-onboarding__content--forward{animation:fadeIn .2s ease backwards}}@keyframes slideInRight{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}";
n(css,{});

var WelcomeScreen = withT(function (_ref) {
  var t = _ref.t,
    setCurrentStep = _ref.setCurrentStep,
    nextStep = _ref.nextStep,
    className = _ref.className;
  return /*#__PURE__*/jsxs("div", {
    className: classnames("neeto-molecules-onboarding__wrapper", className),
    "data-testid": "onboarding-welcome-wrapper",
    children: [/*#__PURE__*/jsxs("div", {
      className: "mx-auto mb-6 flex w-full max-w-2xl flex-col gap-y-2 px-6 pt-16",
      children: [/*#__PURE__*/jsx(Typography, {
        className: "text-center",
        "data-testid": "onboarding-welcome-title",
        style: "h1",
        children: t("neetoMolecules.onboarding.helpScreen.welcomeToTitle", {
          appName: capitalize(globalProps.appName)
        })
      }), /*#__PURE__*/jsx(Typography, {
        className: "text-center",
        "data-testid": "onboarding-welcome-description",
        lineHeight: "normal",
        style: "body1",
        children: t("neetoMolecules.onboarding.letUsCustomize", {
          appName: capitalize(globalProps.appName)
        })
      })]
    }), /*#__PURE__*/jsx(Button, {
      "data-testid": "onboarding-welcome-button",
      icon: function icon() {
        return /*#__PURE__*/jsx(RightArrow, {
          className: "rtl:scale-x-[-1]",
          size: 16
        });
      },
      label: t("neetoMolecules.onboarding.getStarted"),
      onClick: function onClick() {
        return setCurrentStep(nextStep);
      }
    })]
  });
});

var Onboarding = function Onboarding(_ref) {
  var _ref$currentStep = _ref.currentStep,
    currentStep = _ref$currentStep === void 0 ? GENERAL_ONBOARDING_STEPS.WELCOME : _ref$currentStep,
    _ref$setCurrentStep = _ref.setCurrentStep,
    setCurrentStep = _ref$setCurrentStep === void 0 ? noop : _ref$setCurrentStep,
    _ref$onboardingSteps = _ref.onboardingSteps,
    onboardingSteps = _ref$onboardingSteps === void 0 ? [] : _ref$onboardingSteps,
    _ref$completeButtonPr = _ref.completeButtonProps,
    completeButtonProps = _ref$completeButtonPr === void 0 ? {} : _ref$completeButtonPr,
    _ref$helpScreenClassN = _ref.helpScreenClassName,
    helpScreenClassName = _ref$helpScreenClassN === void 0 ? "" : _ref$helpScreenClassN,
    _ref$isAnimated = _ref.isAnimated,
    isAnimated = _ref$isAnimated === void 0 ? true : _ref$isAnimated,
    _ref$disableStepClick = _ref.disableStepClick,
    disableStepClick = _ref$disableStepClick === void 0 ? false : _ref$disableStepClick,
    _ref$welcomeScreenCla = _ref.welcomeScreenClassName,
    welcomeScreenClassName = _ref$welcomeScreenCla === void 0 ? "" : _ref$welcomeScreenCla,
    _ref$completedScreenC = _ref.completedScreenClassName,
    completedScreenClassName = _ref$completedScreenC === void 0 ? "" : _ref$completedScreenC,
    completedScreenSuccessMessage = _ref.completedScreenSuccessMessage;
  var steps = useMemo(function () {
    return createSteps(onboardingSteps, setCurrentStep, currentStep, helpScreenClassName);
  }, [onboardingSteps]);
  var prevStep = useRef(currentStep);
  var _useState = useState(""),
    _useState2 = _slicedToArray(_useState, 2),
    direction = _useState2[0],
    setDirection = _useState2[1];
  var getOnboardingStepIndex = function getOnboardingStepIndex(stepKey) {
    return steps.findIndex(function (step) {
      return step.key === stepKey;
    });
  };
  useEffect(function () {
    if (currentStep === prevStep.current) return;
    setDirection(getOnboardingStepIndex(currentStep) > getOnboardingStepIndex(prevStep.current) ? "forward" : "backward");
    prevStep.current = currentStep;
  }, [currentStep]);
  if (currentStep === GENERAL_ONBOARDING_STEPS.WELCOME) {
    return /*#__PURE__*/jsx(WelcomeScreen, {
      currentStep: currentStep,
      setCurrentStep: setCurrentStep,
      className: welcomeScreenClassName,
      nextStep: steps[0].key
    });
  }
  if (currentStep === GENERAL_ONBOARDING_STEPS.FINISH) {
    return /*#__PURE__*/jsx(CompletedScreen, {
      completeButtonProps: completeButtonProps,
      completedScreenSuccessMessage: completedScreenSuccessMessage,
      className: completedScreenClassName
    });
  }
  var handleStepChange = function handleStepChange(index) {
    return setCurrentStep(steps[index].key);
  };
  var isStepperVisible = steps.length > 1;
  return /*#__PURE__*/jsxs("div", {
    className: classnames("neeto-molecules-onboarding__container", {
      "neeto-molecules-onboarding__wrapper": !isStepperVisible
    }),
    children: [isStepperVisible && /*#__PURE__*/jsx("div", {
      className: "neeto-molecules-onboarding__stepper-wrapper",
      children: /*#__PURE__*/jsx(Stepper, {
        steps: steps,
        activeIndex: findIndexBy({
          key: currentStep
        }, steps),
        setActiveIndex: disableStepClick ? noop : handleStepChange
      })
    }), steps.map(function (step, index) {
      return /*#__PURE__*/jsx("div", {
        className: classnames("neeto-molecules-onboarding__content", {
          "neeto-molecules-onboarding__content--forward overflow-x-hidden": isAnimated && direction === "forward",
          "neeto-molecules-onboarding__content--backward overflow-x-hidden": isAnimated && direction === "backward",
          hidden: currentStep !== step.key
        }),
        children: step === null || step === void 0 ? void 0 : step.element
      }, index);
    })]
  });
};

export { Onboarding as default };
//# sourceMappingURL=Onboarding.js.map
