import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import Flex from '../../flex/Flex';
import Transition from '../Transition';
import DummyBox from './common/DummyBox';
import Stage from './common/Stage';
import { predefinedEffects } from '../predefinedEffects';
var predefinedEffectTypes = Object.keys(predefinedEffects);
export var PredefinedEffects = function PredefinedEffects() {
  return /*#__PURE__*/React.createElement(Flex, {
    style: {
      gap: 16
    },
    wrap: true,
    justifyContent: "center"
  }, predefinedEffectTypes.map(function (type) {
    return /*#__PURE__*/React.createElement(PredefinedEffect, {
      key: type,
      type: type
    });
  }));
};

var PredefinedEffect = function PredefinedEffect(_ref) {
  var type = _ref.type;

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      active = _React$useState2[0],
      setActive = _React$useState2[1];

  var effect = React.useMemo(function () {
    return Transition.createEffect({
      type: type
    });
  }, [type]);
  return /*#__PURE__*/React.createElement(Stage, {
    format: "listitem",
    description: type,
    onClick: function onClick() {
      return setActive(function (b) {
        return !b;
      });
    },
    centered: true
  }, /*#__PURE__*/React.createElement(Transition, {
    active: active,
    effect: effect
  }, /*#__PURE__*/React.createElement(DummyBox, {
    size: "small",
    color: "blue"
  })));
};