import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import Text from '../../text/Text';
import Transition from '../Transition';
var slideFadeInEffect = {
  initial: {
    opacity: 0,
    transform: {
      translateY: '-s'
    }
  },
  animate: {
    opacity: 1,
    duration: 'gentle2',
    easing: 'entry'
  }
};
var slideFadeOutEffect = {
  animate: {
    opacity: 0,
    transform: {
      translateY: 's'
    },
    duration: 'gentle2',
    easing: 'exit'
  }
};
var cycle = [slideFadeInEffect, slideFadeOutEffect];

var increment = function increment(n) {
  return n + 1;
};

export var InTextCounter = function InTextCounter() {
  var _React$useState = React.useState(0),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      count = _React$useState2[0],
      setCount = _React$useState2[1];

  var _React$useState3 = React.useState(0),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      index = _React$useState4[0],
      setIndex = _React$useState4[1];

  var currentEffect = cycle[index % cycle.length];

  var handleTransitionEnd = function handleTransitionEnd(effect) {
    setIndex(increment); // increase count value when the counter is hidden

    if (effect === slideFadeOutEffect) {
      setCount(increment);
    }
  };

  var counter = /*#__PURE__*/React.createElement(Transition, {
    active: true,
    effect: currentEffect,
    onTransitionEnd: handleTransitionEnd,
    inline: true
  }, /*#__PURE__*/React.createElement(Text, {
    weight: "bold",
    style: {
      fontVariantNumeric: 'tabular-nums'
    },
    inherited: true
  }, count));
  var users = count === 1 ? 'user' : 'users';
  return /*#__PURE__*/React.createElement(Text, null, "Counters! ", counter, " ", users, " love them.");
};
InTextCounter.parameters = {
  layout: 'centered'
};