import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import hex from '../../colors/hex';
import Flex from '../../flex/Flex';
import Text from '../../text/Text';
import Button from '../../buttons/Button';
import Transition from '../Transition';
var fillModes = ['none', 'forwards', 'backwards', 'both'];
var shrinkFadeEffect = {
  initial: {
    opacity: 0
  },
  animate: {
    opacity: 1,
    transform: {
      scale: 0.25
    },
    duration: 1000,
    easing: 'entry'
  },
  exit: {
    opacity: 0,
    duration: 1000,
    easing: 'exit'
  }
};
export var FillMode = function FillMode() {
  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-y-s",
    direction: "column",
    alignItems: "center",
    style: {
      width: 'min-content'
    }
  }, /*#__PURE__*/React.createElement(Flex, {
    className: "sg-space-x-l",
    marginBottom: "m"
  }, fillModes.map(function (mode) {
    return /*#__PURE__*/React.createElement(Container, {
      key: mode,
      description: mode
    }, /*#__PURE__*/React.createElement(Transition, {
      active: active,
      effect: shrinkFadeEffect,
      fillMode: mode,
      delay: 1000
    }, /*#__PURE__*/React.createElement(Circle, null)));
  })), /*#__PURE__*/React.createElement(Button, {
    variant: "solid",
    onClick: function onClick() {
      return setActive(function (b) {
        return !b;
      });
    },
    fullWidth: true
  }, active ? 'hide' : 'show'), /*#__PURE__*/React.createElement(Text, {
    size: "small",
    color: "text-gray-50",
    align: "to-center"
  }, "Activating transition spawns a shrinking circle inside the parent container with a 1s delay."));
};

var Circle = function Circle() {
  return /*#__PURE__*/React.createElement("div", {
    style: {
      width: 64,
      height: 64,
      backgroundColor: hex['blue-40'],
      borderRadius: '50%'
    }
  });
};

var Container = function Container(_ref) {
  var description = _ref.description,
      children = _ref.children;
  return /*#__PURE__*/React.createElement(Flex, {
    direction: "column",
    alignItems: "center",
    className: "sg-space-y-m"
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative',
      width: 64,
      height: 64
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      outline: "1px solid ".concat(hex['indigo-50'])
    }
  }, children)), /*#__PURE__*/React.createElement(Text, {
    size: "small"
  }, description));
};

FillMode.parameters = {
  layout: 'centered'
};