"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Loading = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _useTheme = require("../theme/use-theme.js");
var _tokens = require("../styles/tokens.js");
var _SpinnerIconWeb = require("./SpinnerIcon.web.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const SIZE_CONFIG = {
  small: {
    spinner: 20,
    text: 13
  },
  medium: {
    spinner: 24,
    text: 15
  },
  large: {
    spinner: 44,
    text: 16
  }
};
const SpinnerLoading = ({
  size = 'medium',
  color,
  className,
  text,
  textStyle,
  style,
  showText = true,
  iconSize,
  spinnerIcon,
  testID
}) => {
  const theme = (0, _useTheme.useTheme)();
  const sizeConfig = SIZE_CONFIG[size];
  const effectiveIconSize = iconSize ?? sizeConfig.spinner;
  const spinnerColor = className ? 'currentColor' : color ?? theme.colors.primary;
  const textColor = color ?? theme.colors.textSecondary;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [styles.container, style],
    testID: testID,
    children: [spinnerIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerIconWeb.SpinnerIcon, {
      size: effectiveIconSize,
      color: spinnerColor,
      className: className
    }), showText && text && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [styles.text, {
        color: textColor,
        fontSize: sizeConfig.text,
        marginTop: 8
      }, textStyle],
      children: text
    })]
  });
};

/**
 * Web fork of the `top` variant.
 *
 * The native variant collapses/expands the container height and slides the
 * spinner in/out with `react-native-reanimated`. Reanimated can't ship to a
 * web bundle (its worklets Babel plugin has no web equivalent and importing it
 * statically breaks the bundler), so this fork drives the same motion with CSS
 * transitions — react-native-web emits `transition-*` style props to the DOM.
 * The element stays mounted across `showLoading` toggles so both directions
 * animate, exactly like the native `withTiming` on `height`, `opacity`, and
 * `translateY`.
 */
const TopLoading = ({
  size = 'medium',
  color,
  style,
  showLoading = true,
  iconSize,
  heightOffset = 0,
  spinnerIcon,
  testID
}) => {
  const theme = (0, _useTheme.useTheme)();
  const sizeConfig = SIZE_CONFIG[size];
  const effectiveIconSize = iconSize ?? sizeConfig.spinner;
  const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
  const spinnerColor = color ?? theme.colors.primary;
  const duration = _tokens.animation.duration.slow;
  // `cubic-bezier(0.33, 1, 0.68, 1)` is the standard CSS approximation of
  // reanimated's `Easing.out(Easing.cubic)` used by the native variant.
  const easing = 'cubic-bezier(0.33, 1, 0.68, 1)';
  const containerTransition = {
    transitionProperty: 'height',
    transitionDuration: `${duration}ms`,
    transitionTimingFunction: easing
  };
  const innerTransition = {
    transitionProperty: 'opacity, transform',
    transitionDuration: `${duration}ms`,
    transitionTimingFunction: easing
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.topContainer, {
      height: showLoading ? targetHeight : 0
    }, containerTransition],
    testID: testID,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.topLoadingView, {
        height: targetHeight
      }, {
        opacity: showLoading ? 1 : 0,
        transform: [{
          translateY: showLoading ? 0 : -targetHeight
        }]
      }, innerTransition, style],
      children: spinnerIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerIconWeb.SpinnerIcon, {
        size: effectiveIconSize,
        color: spinnerColor
      })
    })
  });
};
const SkeletonLoading = ({
  lines = 3,
  width = '100%',
  lineHeight = 16,
  style,
  testID
}) => {
  const theme = (0, _useTheme.useTheme)();
  const skeletonColor = theme.colors.backgroundSecondary;
  const skeletonLines = (0, _react.useMemo)(() => Array.from({
    length: lines
  }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.skeletonLine, {
      width: typeof width === 'string' ? width : `${width}%`,
      height: lineHeight,
      backgroundColor: skeletonColor,
      marginBottom: index < lines - 1 ? 8 : 0
    }]
  }, index)), [lines, width, lineHeight, skeletonColor]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.skeletonContainer, style],
    testID: testID,
    children: skeletonLines
  });
};
const InlineLoading = ({
  size = 'small',
  color,
  text,
  style,
  textStyle,
  spinnerIcon,
  testID
}) => {
  const theme = (0, _useTheme.useTheme)();
  const sizeConfig = SIZE_CONFIG[size];
  const spinnerColor = color ?? theme.colors.primary;
  const textColor = theme.colors.textSecondary;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [styles.inlineContainer, style],
    testID: testID,
    children: [spinnerIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerIconWeb.SpinnerIcon, {
      size: SIZE_CONFIG.small.spinner,
      color: spinnerColor
    }), text && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
      style: [{
        color: textColor,
        fontSize: sizeConfig.text,
        marginLeft: 8
      }, textStyle],
      children: text
    })]
  });
};
const LoadingComponent = props => {
  const variant = props.variant ?? 'spinner';
  switch (variant) {
    case 'top':
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(TopLoading, {
        ...props
      });
    case 'skeleton':
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonLoading, {
        ...props
      });
    case 'inline':
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(InlineLoading, {
        ...props
      });
    case 'spinner':
    default:
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerLoading, {
        ...props
      });
  }
};
const Loading = exports.Loading = /*#__PURE__*/(0, _react.memo)(LoadingComponent);
Loading.displayName = 'Loading';
const styles = _reactNative.StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 16
  },
  text: {
    textAlign: 'center'
  },
  topContainer: {
    width: '100%',
    position: 'relative',
    overflow: 'hidden'
  },
  topLoadingView: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    left: 0
  },
  skeletonContainer: {
    width: '100%'
  },
  skeletonLine: {
    borderRadius: 4
  },
  inlineContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=Loading.web.js.map