import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import Flex from '../../flex/Flex';
import Text from '../../text/Text';
import Button from '../../buttons/Button';
import Transition from '../Transition';
var delayOffset = 240;
var typingEffect = {
  initial: {
    opacity: 0,
    transform: {
      translateY: '-xs'
    }
  },
  animate: {
    opacity: 1,
    duration: 'quick2',
    easing: 'entry'
  },
  exit: {
    opacity: 0,
    duration: 'quick2',
    easing: 'exit'
  }
};
export var TypewriterEffect = function TypewriterEffect() {
  var message = 'hello world';

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

  return /*#__PURE__*/React.createElement(Flex, {
    className: "sg-space-x-xs",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "solid-light",
    onClick: function onClick() {
      return setActive(function (b) {
        return !b;
      });
    },
    toggle: active ? 'red' : undefined
  }, active ? 'erase' : 'enter'), /*#__PURE__*/React.createElement(Text, {
    whiteSpace: "pre-wrap"
  }, _toConsumableArray(message).map(function (letter, index) {
    return /*#__PURE__*/React.createElement(Transition, {
      key: index,
      active: active,
      effect: typingEffect,
      delay: delayOffset * index,
      inline: true
    }, /*#__PURE__*/React.createElement(Text, {
      inherited: true
    }, letter));
  })));
};
TypewriterEffect.parameters = {
  layout: 'centered'
};