"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var FlowStepper_stories_exports = {};
__export(FlowStepper_stories_exports, {
  Demo: () => Demo,
  IndexedByKey: () => IndexedByKey,
  Minimal: () => Minimal,
  default: () => FlowStepper_stories_default
});
module.exports = __toCommonJS(FlowStepper_stories_exports);
var import_react = __toESM(require("react"));
var import_react_transition_group = require("react-transition-group");
var import_styled_components = __toESM(require("styled-components"));
var import_manager_api = require("@storybook/manager-api");
var import__ = require("../../..");
var import_helpers = require("../../helpers");
var import_react2 = require("react");
const description = `
### A customizable flow layout.

This component accepts multiple children as steps and displays the active one as well
a progress stepper and optionally a header and/or a footer.

## Usage

\`\`\`js

import { FlowStepper } from "@ledgerhq/react-ui"

\`\`\`

Each step is a child of the component, which must be a JSX element having at least a \`label\` prop.
This label will be used by the flow stepper to populate the name of the step inside the progress stepper component.

### Tip #1:
To avoid creating specific passthrough components you can use the \`<FlowStepper.Step label="Step label">{\u2026}</FlowStepper.Step>\` helper.

### Tip #2:
You can define a specific header/footer for a given step by using the props \`header\`/\`footer\` on each step child of the component.

\`\`\`jsx
<FlowStepper
  activeIndex={1}
  renderStepFooter={ // Optional
    ({activeIndex, stepsLength, children}) => (
      <YourFooterWrapper>
        {children}
      </YourFooterWrapper>
    )
  }
>
  <YourStepA label="StepA" />
  <YourStepB label="StepB" footer={<YourStepBFooter />}/>
  <YourStepC label="StepC" />
  <YourStepD label="StepD" />
</FlowStepper.Indexed>
\`\`\`

### Tip #3:
If you want to define steps that are identified by a \`string\` identifier, you can use FlowStepper with the \`activeKey\` prop and children that each have an \`itemKey\` prop.
This allows you to not have to hardcode steps indices.

\`\`\`jsx
<FlowStepper.Indexed activeKey="stepC">
  <YourStepA label="StepA" itemKey="stepA" />
  <YourStepB label="StepB" itemKey="stepB" />
  <YourStepC label="StepC" itemKey="stepC" />
  <YourStepD label="StepD" itemKey="stepD" />
</FlowStepper.Indexed>
\`\`\`


## Basic example:

\`\`\`jsx
const NB_OF_STEPS = 10;
const [activeIndex, setActiveIndex] = React.useState(0);

<FlowStepper
  activeIndex={activeIndex}
  header={() => (
    <Text variant="h1">
      Header - Page n\xB0{activeIndex + 1} / {NB_OF_STEPS}
    </Text>
  )}
  footer={() => (
    <Flex mt={6} flexDirection="column" rowGap={6} alignItems="flex-end">
      <Box alignSelf="stretch">
        <Divider variant="light" />
      </Box>
      <Flex columnGap={6}>
        <Button
          variant="main"
          outline
          disabled={activeIndex <= 0}
          onClick={() => setActiveIndex(i => i - 1)}
        >
          Previous
        </Button>
        <Button
          variant="main"
          disabled={activeIndex >= NB_OF_STEPS - 1}
          onClick={() => setActiveIndex(i => i + 1)}
        >
          Continue
        </Button>
      </Flex>
    </Flex>
  )}
>
  {new Array(NB_OF_STEPS).fill(0).map((_, index) => (
    <FlowStepper.Step label={"Step " + index}>
      <Text key={index} variant="body">
        {lipsum}
      </Text>
    </FlowStepper.Step>
  ))}
</FlowStepper>
\`\`\`


`;
var FlowStepper_stories_default = {
  title: "Navigation/FlowStepper",
  component: import__.FlowStepper,
  argTypes: {
    activeIndex: { control: "number" },
    extraProps: { control: "disabled" },
    extraContainerProps: { control: "disabled" },
    extraStepperProps: { control: "disabled" },
    extraStepperContainerProps: { control: "disabled" },
    children: { control: "disabled" },
    renderChildren: { control: "disabled" },
    header: { control: "disabled" },
    stepHeaders: { control: "disabled" },
    renderStepHeader: { control: "disabled" },
    footer: { control: "disabled" },
    stepFooters: { control: "disabled" },
    renderStepFooter: { control: "disabled" }
  },
  args: {
    activeIndex: 0
  },
  parameters: {
    docs: {
      description: {
        component: description
      }
    }
  }
};
const NB_OF_STEPS = 5;
const Minimal = (args) => {
  const { activeIndex, ...rest } = args;
  const [, updateArgs] = (0, import_manager_api.useArgs)();
  return /* @__PURE__ */ import_react.default.createElement(
    import__.FlowStepper,
    {
      activeIndex,
      header: () => /* @__PURE__ */ import_react.default.createElement(import__.Text, { variant: "h1" }, "Header - Page n\xB0", activeIndex + 1, " / ", NB_OF_STEPS),
      footer: () => /* @__PURE__ */ import_react.default.createElement(import__.Flex, { mt: 6, flexDirection: "column", rowGap: 6, alignItems: "flex-end" }, /* @__PURE__ */ import_react.default.createElement(import__.Box, { alignSelf: "stretch" }, /* @__PURE__ */ import_react.default.createElement(import__.Divider, null)), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { columnGap: 6 }, /* @__PURE__ */ import_react.default.createElement(
        import__.Button,
        {
          variant: "main",
          outline: true,
          disabled: activeIndex <= 0,
          onClick: () => updateArgs({ activeIndex: activeIndex - 1 })
        },
        "Previous"
      ), /* @__PURE__ */ import_react.default.createElement(
        import__.Button,
        {
          variant: "main",
          disabled: activeIndex >= NB_OF_STEPS - 1,
          onClick: () => updateArgs({ activeIndex: activeIndex + 1 })
        },
        "Continue"
      ))),
      ...rest
    },
    [
      ...new Array(NB_OF_STEPS).fill(0).map((_, index) => /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper.Step, { label: "Step " + index }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { key: index, variant: "body" }, import_helpers.lipsum), /* @__PURE__ */ import_react.default.createElement(import__.Button, { mt: 2, onClick: () => updateArgs({ activeIndex: NB_OF_STEPS }) }, "Navigate to the hidden step."))),
      /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper.Step, { label: "Hidden Step", hidden: true }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { key: "hidden", variant: "body" }, "I am hidden."))
    ]
  );
};
const Header = ({ activeIndex, onBack }) => {
  return /* @__PURE__ */ import_react.default.createElement(import__.Box, { position: "relative", my: 6 }, onBack && /* @__PURE__ */ import_react.default.createElement(import__.Box, { position: "absolute" }, /* @__PURE__ */ import_react.default.createElement(import__.Link, { onClick: onBack, Icon: import__.IconsLegacy.ArrowLeftMedium, iconPosition: "left" }, "Back")), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { justifyContent: "center" }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { variant: "h2" }, "Header ", activeIndex + 1)));
};
const Footer = ({
  onContinue,
  children
}) => /* @__PURE__ */ import_react.default.createElement(import__.Flex, { mt: 6, flexDirection: "column", rowGap: 6 }, /* @__PURE__ */ import_react.default.createElement(import__.Box, { alignSelf: "stretch" }, /* @__PURE__ */ import_react.default.createElement(import__.Divider, null)), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children || /* @__PURE__ */ import_react.default.createElement(import__.Flex, null), onContinue && /* @__PURE__ */ import_react.default.createElement(import__.Button, { variant: "main", onClick: onContinue }, "Continue")));
const AnimatedItem = (0, import_styled_components.default)(import__.Flex)`
  transition: opacity 500ms;
  width: 100%;
  height: 100%;
  &.step-enter {
    opacity: 0;
  }
  &.step-enter-active {
    opacity: 1;
  }
  &.step-exit {
    opacity: 1;
  }
  &.step-exit-active {
    opacity: 0;
  }
`;
const Item = ({ label }) => /* @__PURE__ */ import_react.default.createElement(AnimatedItem, null, /* @__PURE__ */ import_react.default.createElement(
  import__.Flex,
  {
    position: "absolute",
    left: "0",
    right: "0",
    top: "0",
    bottom: "0",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: `${label.toLowerCase()}.c50`
  },
  /* @__PURE__ */ import_react.default.createElement(import__.Text, { variant: "h2", textTransform: "capitalize" }, label)
));
const steps = ["Primary", "Neutral", "Success", "Warning", "Error"];
const StepFooter = ({ label }) => /* @__PURE__ */ import_react.default.createElement(import__.Flex, { flexDirection: "row", alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { whiteSpace: "pre" }, "Footer for step "), /* @__PURE__ */ import_react.default.createElement(import__.Tag, { size: "medium", type: "plain", active: true }, label));
const Demo = (args) => {
  const [, updateArgs] = (0, import_manager_api.useArgs)();
  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, { height: "90vh" }, /* @__PURE__ */ import_react.default.createElement(
    import__.FlowStepper,
    {
      header: ({ activeIndex }) => /* @__PURE__ */ import_react.default.createElement(
        Header,
        {
          activeIndex,
          onBack: activeIndex > 0 ? () => {
            updateArgs({ activeIndex: activeIndex - 1 });
          } : void 0
        }
      ),
      renderStepFooter: ({ stepsLength, activeIndex, children }) => /* @__PURE__ */ import_react.default.createElement(
        Footer,
        {
          onContinue: activeIndex < stepsLength - 1 ? () => {
            updateArgs({ activeIndex: activeIndex + 1 });
          } : void 0
        },
        children
      ),
      extraStepperContainerProps: { my: 12 },
      extraStepperProps: { maxWidth: "500px" },
      renderChildren: ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react_transition_group.TransitionGroup, { component: null }, children),
      ...args
    },
    steps.map((label) => /* @__PURE__ */ import_react.default.createElement(
      import_react_transition_group.CSSTransition,
      {
        key: label,
        label,
        footer: /* @__PURE__ */ import_react.default.createElement(StepFooter, { label }),
        timeout: 500,
        classNames: "step",
        mountOnEnter: true,
        unmountOnExit: true
      },
      /* @__PURE__ */ import_react.default.createElement(Item, { label })
    ))
  ));
};
const StepWithNavigation = (props) => {
  const { label, setActiveStep } = props;
  const content = (0, import_react.useMemo)(() => {
    return steps.map((step) => {
      return /* @__PURE__ */ import_react.default.createElement(
        import__.Button,
        {
          key: step,
          disabled: step === label,
          variant: "main",
          onClick: () => setActiveStep(step)
        },
        'Go to "',
        step,
        '"'
      );
    });
  }, [setActiveStep, label]);
  return /* @__PURE__ */ import_react.default.createElement(
    import__.Flex,
    {
      flex: 1,
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      padding: 4,
      rowGap: 4,
      backgroundColor: `${label.toLowerCase()}.c50`
    },
    content
  );
};
const IndexedByKey = (args) => {
  const [activeStep, setActiveStep] = (0, import_react2.useState)(steps[0]);
  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, { height: "90vh" }, /* @__PURE__ */ import_react.default.createElement(
    import__.FlowStepper.Indexed,
    {
      activeKey: activeStep,
      header: ({ activeIndex }) => /* @__PURE__ */ import_react.default.createElement(
        Header,
        {
          activeIndex,
          onBack: activeIndex > 0 ? () => {
            setActiveStep(steps[activeIndex - 1]);
          } : void 0
        }
      ),
      footer: ({ stepsLength, activeIndex }) => /* @__PURE__ */ import_react.default.createElement(
        Footer,
        {
          onContinue: activeIndex < stepsLength - 1 ? () => {
            setActiveStep(steps[activeIndex + 1]);
          } : void 0
        }
      ),
      extraStepperContainerProps: { my: 12 },
      extraStepperProps: { maxWidth: "500px" },
      ...args
    },
    steps.map((label) => /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper.Indexed.Step, { key: label, label, itemKey: label }, /* @__PURE__ */ import_react.default.createElement(StepWithNavigation, { label, setActiveStep })))
  ));
};
//# sourceMappingURL=FlowStepper.stories.js.map
