function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import styled, { useTheme } from 'styled-components';
import { AnimatePresence, motion } from 'framer-motion';
import { Flexbox, Spinner, Typography } from '../../../..';
var LOADING_ANIMATION_DURATION = 0.2;
var getSpinnerSize = function getSpinnerSize(size) {
  switch (size) {
    case 's':
      return 3;
    case 'm':
      return 5;
    default:
      return 6;
  }
};
var SpinnerAnimation = styled(motion.span).withConfig({
  displayName: "ButtonContent__SpinnerAnimation",
  componentId: "sc-1oio540-0"
})(["position:absolute;left:0;top:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center;"]);
var IconWrapper = styled.div.withConfig({
  displayName: "ButtonContent__IconWrapper",
  componentId: "sc-1oio540-1"
})(["align-self:center;"]);
export var ButtonContent = function ButtonContent(props) {
  var children = props.children,
    colorFn = props.colorFn,
    icon = props.icon,
    iconPlacement = props.iconPlacement,
    loading = props.loading,
    variant = props.variant,
    size = props.size,
    _props$delayLoadingSp = props.delayLoadingSpinnerAnimation,
    delayLoadingSpinnerAnimation = _props$delayLoadingSp === void 0 ? true : _props$delayLoadingSp;
  var theme = useTheme();
  var type;
  switch (size) {
    case 's':
      type = 'tertiary';
      break;
    case 'm':
      type = 'secondary';
      break;
    default:
      type = 'primary';
      break;
  }
  var content = React.createElement(React.Fragment, null, icon ? React.createElement(Flexbox, {
    container: true,
    gap: variant === 'neutral' && size === 's' ? 1 : 2,
    justifyContent: "space-between",
    alignItems: "baseline"
  }, iconPlacement === 'left' && React.createElement(IconWrapper, null, icon), React.createElement(Flexbox, {
    item: true
  }, React.createElement(Typography, {
    type: type,
    color: "inherit",
    weight: "bold",
    as: "div"
  }, children)), iconPlacement === 'right' && React.createElement(IconWrapper, null, icon)) : React.createElement(Typography, _extends({
    type: type,
    color: "inherit",
    weight: "bold"
  }, size === 's' ? {
    as: 'div'
  } : {}), children));
  if (variant === 'neutral') {
    return content;
  }
  return React.createElement(React.Fragment, null, React.createElement(motion.span, {
    initial: {
      opacity: 1
    },
    animate: {
      opacity: loading ? 0 : 1
    },
    transition: {
      duration: LOADING_ANIMATION_DURATION
    }
  }, content), React.createElement(AnimatePresence, null, loading && React.createElement(SpinnerAnimation, {
    initial: {
      opacity: 0
    },
    animate: {
      opacity: 1
    },
    exit: {
      opacity: 0
    },
    transition: {
      duration: LOADING_ANIMATION_DURATION
    }
  }, React.createElement(Spinner, {
    id: "spinner-".concat(variant, "-").concat(size, "-").concat(colorFn && colorFn(theme)),
    color: variant === 'primary' ? function (t) {
      return t.color.buttonSpinner;
    } : colorFn || function (t) {
      return t.color.buttonSpinnerSecondary;
    },
    size: getSpinnerSize(size),
    delay: delayLoadingSpinnerAnimation
  }))));
};