import { _ as _slicedToArray } from '../slicedToArray-BB-AwwkK.js';
import { _ as _extends } from '../extends-C4cduGrv.js';
import { _ as _defineProperty } from '../defineProperty-CEd-kZQW.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-TXwlfNxG.js';
import React__default, { useState, useLayoutEffect, useEffect, useRef, createRef } from 'react';
import PropTypes from 'prop-types';
import Button from '../button/index.js';
import '@reach/visually-hidden';
import '../ck-icon/index.js';
import 'classnames';
import '../ck-icon/assets/icon-map/index.js';
import '../icon/index.js';
import '@fortawesome/react-fontawesome';
import '../icon/icons.js';
import '../icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/pro-solid-svg-icons';
import '@fortawesome/pro-light-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../floating-ui.react-cWPyyUrN.js';
import '../typeof-CgC7Bq6K.js';
import '../toConsumableArray-dKQYsfpV.js';
import '../index-qSfOyGhk.js';
import 'react-dom';
import '../button/button-group.js';

var _excluded = ["visible", "fixed", "children", "setWidth", "style"],
    _excluded2 = ["children", "loading", "labels"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function usePrevious(value) {
  var ref = useRef();
  useEffect(function () {
    ref.current = value;
  }, [value]);
  return ref.current;
}

function useArrayRef(length) {
  var ref = useRef([]);

  if (ref.current.length !== length) {
    ref.current = Array(length).fill().map(function (_, i) {
      return ref.current[i] || /*#__PURE__*/createRef();
    });
  }

  return ref;
}

function Text(_ref, ref) {
  var visible = _ref.visible,
      fixed = _ref.fixed,
      children = _ref.children;
      _ref.setWidth;
      var style = _ref.style,
      props = _objectWithoutProperties(_ref, _excluded);

  var transition = {
    transition: "opacity 200ms ease-in-out"
  };

  var showing = _objectSpread(_objectSpread({
    opacity: 1
  }, transition), style);

  var hidden = _objectSpread(_objectSpread({
    opacity: 0
  }, transition), style);

  var className = fixed ? "absolute left-0" : "";
  return /*#__PURE__*/React__default.createElement("span", _extends({
    ref: ref,
    className: className,
    style: visible ? showing : hidden
  }, props), children);
}

Text = /*#__PURE__*/React__default.forwardRef(Text);

function SaveButton(_ref2) {
  var children = _ref2.children,
      loading = _ref2.loading,
      _ref2$labels = _ref2.labels,
      labels = _ref2$labels === void 0 ? {} : _ref2$labels,
      props = _objectWithoutProperties(_ref2, _excluded2);

  var _useState = useState("initial"),
      _useState2 = _slicedToArray(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      lastTransition = _useState4[0],
      setLastTransition = _useState4[1];

  var previousLoading = usePrevious(loading);

  var _useState5 = useState("auto"),
      _useState6 = _slicedToArray(_useState5, 2),
      width = _useState6[0],
      setWidth = _useState6[1];

  var texts = useArrayRef(3);

  var finish = function finish() {
    setState("done");
    setTimeout(function () {
      setState("initial");
    }, 1500);
  };

  useLayoutEffect(function () {
    var max = texts.current.sort(function (a, b) {
      return b.current.offsetWidth - a.current.offsetWidth;
    })[0].current.offsetWidth;
    setWidth(max);
  }, []);
  useEffect(function () {
    if (loading && !previousLoading) {
      setState("loading");
      setLastTransition(new Date().getTime());
    } else if (!loading && previousLoading) {
      var time = new Date().getTime();
      var elapsed = time - lastTransition;
      var timeout = Math.max(1000 - elapsed, 0);
      setTimeout(finish, timeout);
    }
  }, [loading, previousLoading, lastTransition]);
  return /*#__PURE__*/React__default.createElement(Button, _extends({
    is: "primary"
  }, props, {
    disabled: state !== "initial",
    "aria-label": children
  }), /*#__PURE__*/React__default.createElement("span", {
    className: "relative block text-center",
    style: {
      width: width
    }
  }, /*#__PURE__*/React__default.createElement(Text, {
    ref: texts.current[0],
    visible: state === "initial",
    style: {
      width: width
    }
  }, children), /*#__PURE__*/React__default.createElement(Text, {
    ref: texts.current[1],
    fixed: true,
    visible: state === "loading",
    style: {
      width: width
    }
  }, labels.loading || "Saving"), /*#__PURE__*/React__default.createElement(Text, {
    ref: texts.current[2],
    fixed: true,
    visible: state === "done",
    style: {
      width: width
    }
  }, labels.complete || "Done")));
}

SaveButton.propTypes = {
  children: PropTypes.string,
  loading: PropTypes.bool,
  labels: PropTypes.object
};

export { SaveButton as default };
