import { _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { Step, Box } from '@mui/material';
import Icon from '../components/Icon.js';
import Button from '../components/Button.js';
import StepLabel from '../components/StepLabel.js';
import Typography from '../components/Typography.js';
import StepLabelText from '../components/StepLabelText.js';
import Stepper from '../components/Stepper.js';
import '@mui/material/styles';
import '../icons/ArrowLeft.js';
import '../icons/ArrowRight.js';
import '../icons/CloseCircle.js';
import '../icons/InfoCircle.js';
import '../icons/ErrorCircle.js';
import '../icons/Attention.js';
import '../icons/HelpCircle.js';
import '../icons/Document.js';
import '../icons/DocumentText.js';
import '../icons/Lock.js';
import '../icons/Delete.js';
import '../icons/Users.js';
import '../icons/Stakefish.js';
import '../icons/Sound.js';
import '../icons/Beacon.js';
import '../icons/TriangleRight.js';
import '../icons/TriangleLeft.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/Sent.js';
import '../icons/Download.js';
import '../icons/Faster.js';
import '../icons/Slower.js';
import '../icons/Usb.js';
import '../icons/Key.js';
import '../icons/Edit.js';
import '../icons/Expand.js';
import '../icons/Collapse.js';
import '../icons/Success.js';
import '../icons/SuccessCircle.js';
import '../icons/Fail.js';
import '../icons/Desktop.js';
import '../icons/Mobile.js';
import '../icons/Loading.js';
import '../icons/Upload.js';
import '../icons/Check.js';
import '../icons/ChevronLeft.js';
import '../icons/ChevronRight.js';
import '../icons/Plus.js';
import '../icons/Minus.js';
import '../icons/Globe.js';
import '../icons/Link.js';
import '../icons/Copy.js';
import '../icons/Medium.js';
import '../icons/Twitter.js';
import '../icons/Telegram.js';
import '../icons/Eth.js';
import '../icons/Sort.js';
import '../icons/Close.js';
import '../icons/DollarSign.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../icons/Instagram.js';
import '../icons/LinkedIn.js';
import '../icons/Reddit.js';
import '../icons/YouTube.js';
import '../icons/Chrome.js';
import '../icons/CloudConnect.js';
import '../icons/Update.js';
import '../icons/Menu.js';
import '../icons/Settings.js';
import '../clsx.m-6243b874.js';
import '@mui/material/Button';
import '../theme/colors.js';
import '@mui/material/StepLabel';
import '../components/StepIcon.js';
import '../emotion-react.esm-8b837a94.js';
import '@mui/material/Box';
import '../_commonjsHelpers-1789f0cf.js';
import '@mui/material/Typography';
import '../theme/typography.js';
import '@mui/material/Stepper';
import '../components/StepConnector.js';
import '@mui/material/StepConnector';

var argTypes = {
    simulateError: {
        name: "isFakeErrorStep",
        description: "Simulate error stake result",
        defaultValue: true,
        control: {
            type: "boolean"
        },
        type: { summary: "boolean" }
    },
    simulateLoading: {
        name: "isFakeLoadingStep",
        description: "Simulate loading",
        defaultValue: false,
        control: {
            type: "boolean"
        },
        type: { summary: "boolean" }
    },
    orientation: {
        name: "orientation",
        defaultValue: "vertical",
        options: ["horizontal", "vertical"],
        control: {
            type: "select"
        },
        table: {
            type: { summary: "string" },
            defaultValue: { summary: "vertical" }
        }
    },
    disabled: { table: { disable: true } },
    component: { table: { disable: true } },
    elevation: { table: { disable: true } },
    square: { table: { disable: true } },
    variant: { table: { disable: true } },
    ref: { table: { disable: true } }
};
var getSteps = function () {
    return ["Stake amount", "Review and sign", "Sign and broadcast", "Tx broadcasted"];
};
var Template = function (args) {
    var _a = useState(0), activeStep = _a[0], setActiveStep = _a[1];
    var steps = getSteps();
    var fakeStakeAmount = 0.1;
    var isDone = activeStep === steps.length;
    var handleNext = function () {
        setActiveStep(function (prevActiveStep) { return prevActiveStep + 1; });
    };
    var handleBack = function () {
        setActiveStep(function (prevActiveStep) { return prevActiveStep - 1; });
    };
    var handleReset = function () {
        setActiveStep(0);
    };
    var EthAmountLabel = function () { return (jsxs(Box, __assign({ display: "flex", alignItems: "center" }, { children: [jsx(Icon, { iconKey: "eth", size: "sm" }, void 0), jsxs(StepLabelText, __assign({ variant: "note", typographyProps: { color: "primary" } }, { children: [fakeStakeAmount, " ETH"] }), void 0)] }), void 0)); };
    return (jsxs(Fragment, { children: [jsx(Stepper, __assign({ activeStep: activeStep, orientation: args.orientation }, { children: steps.map(function (label, index) {
                    var isLastStepInDone = isDone && index === steps.length - 1;
                    var isFakeLoadingStep = index === steps.length - 2 && args.simulateLoading;
                    var isFakeErrorStep = isLastStepInDone && args.simulateError;
                    return (jsx(Step, { children: jsxs(StepLabel, __assign({ error: isFakeErrorStep, loading: isFakeLoadingStep }, { children: [jsxs(StepLabelText, __assign({ variant: "subtitle" }, { children: ["Step ", index + 1] }), void 0), jsx(StepLabelText, { children: label }, void 0), activeStep > 0 && index === 0 && fakeStakeAmount && jsx(EthAmountLabel, {}, void 0), isLastStepInDone && (jsx(StepLabelText, __assign({ variant: "note", typographyProps: { color: isFakeErrorStep ? "negative" : "primary" } }, { children: isFakeErrorStep ? "Error" : "Success" }), void 0))] }), void 0) }, label));
                }) }), void 0), activeStep !== steps.length && (jsxs(Box, { children: [jsx(Button, __assign({ color: "secondary", size: "sm", disabled: activeStep === 0, onClick: handleBack }, { children: "Back" }), void 0), jsx(Button, __assign({ color: "primary", size: "sm", variant: "contained", onClick: handleNext }, { children: activeStep === steps.length - 1 ? "Finish" : "Next" }), void 0)] }, void 0)), isDone && (jsxs(Box, { children: [jsx(Typography, __assign({ variant: "descriptionBold" }, { children: "All steps completed - you're finished" }), void 0), jsx(Button, __assign({ onClick: handleReset, size: "sm" }, { children: "Reset" }), void 0)] }, void 0))] }, void 0));
};
var Default = Template.bind({});
var Stepper_stories = {
    title: "Components/Stepper",
    component: Stepper,
    argTypes: argTypes
};

export { Default, Stepper_stories as default };
