import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import Transition from '../Transition';
import DummyBox from './common/DummyBox';
import Stage from './common/Stage';
var fadeEffect = Transition.createEffect({
  type: 'fade'
});
var slideUpFadeEffect = Transition.createEffect({
  type: 'slideUpFade'
});
export var PrefersReducedMotion = function PrefersReducedMotion() {
  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      visible = _React$useState2[0],
      setVisible = _React$useState2[1];

  return /*#__PURE__*/React.createElement(Stage, {
    onClick: function onClick() {
      return setVisible(function (b) {
        return !b;
      });
    },
    description: "click to ".concat(visible ? 'hide' : 'show'),
    centered: true
  }, /*#__PURE__*/React.createElement(Transition, {
    active: visible,
    effect: function effect(reduced) {
      return reduced ? fadeEffect : slideUpFadeEffect;
    }
  }, /*#__PURE__*/React.createElement(DummyBox, {
    size: "medium",
    color: "blue"
  })));
};
PrefersReducedMotion.parameters = {
  layout: 'centered'
};