import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import Button from '../../buttons/Button';
import Transition from '../Transition';
import DummyBox from './common/DummyBox';
import Stage from './common/Stage';
var items = [0, 1, 2, 3, 4, 5];
var fadeEffect = {
  initial: {
    opacity: 0,
    transform: {
      translateY: 's'
    }
  },
  animate: {
    opacity: 1,
    duration: 'moderate1',
    easing: 'entry'
  },
  exit: {
    opacity: 0,
    duration: 'quick1',
    easing: 'exit'
  }
};
var delayOffset = 20;
export var StaggeredMotion = function StaggeredMotion() {
  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      open = _React$useState2[0],
      setOpen = _React$useState2[1];

  return /*#__PURE__*/React.createElement(Stage, {
    className: "sg-space-y-xs",
    format: "portrait"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "outline",
    onClick: function onClick() {
      return setOpen(function (b) {
        return !b;
      });
    },
    fullWidth: true
  }, open ? 'close' : 'open'), items.map(function (id, index) {
    return /*#__PURE__*/React.createElement(Transition, {
      key: id,
      active: open,
      effect: fadeEffect,
      delay: open ? delayOffset * index : 0
    }, /*#__PURE__*/React.createElement(DummyBox, {
      color: "blue",
      size: "listitem"
    }));
  }));
};
StaggeredMotion.parameters = {
  layout: 'centered'
};