"use strict";

import React, { useEffect, useRef } from 'react';
import { Animated, View, StyleSheet } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { SUPPORTS_NATIVE_DRIVER } from "../styles/native-driver.js";
import { jsx as _jsx } from "react/jsx-runtime";
const SHIMMER_DURATION = 1500;
const SHIMMER_MIN_OPACITY = 0.4;
const SHIMMER_MAX_OPACITY = 1;
function useShimmer() {
  const opacity = useRef(new Animated.Value(SHIMMER_MAX_OPACITY)).current;
  useEffect(() => {
    const loop = Animated.loop(Animated.sequence([Animated.timing(opacity, {
      toValue: SHIMMER_MIN_OPACITY,
      duration: SHIMMER_DURATION / 2,
      useNativeDriver: SUPPORTS_NATIVE_DRIVER
    }), Animated.timing(opacity, {
      toValue: SHIMMER_MAX_OPACITY,
      duration: SHIMMER_DURATION / 2,
      useNativeDriver: SUPPORTS_NATIVE_DRIVER
    })]));
    loop.start();
    return () => loop.stop();
  }, [opacity]);
  return opacity;
}
export function Text({
  blend,
  style
}) {
  const {
    colors
  } = useTheme();
  const shimmer = useShimmer();
  const flattened = StyleSheet.flatten(style);
  const width = flattened?.width;
  const lineHeight = flattened?.lineHeight || 14;
  return /*#__PURE__*/_jsx(View, {
    style: [styles.textOuter, {
      maxWidth: width
    }, {
      paddingVertical: lineHeight * 0.15
    }],
    children: /*#__PURE__*/_jsx(Animated.View, {
      style: [styles.textInner, {
        backgroundColor: colors.contrast50,
        height: lineHeight * 0.7,
        opacity: Animated.multiply(shimmer, blend ? 0.6 : 1)
      }]
    })
  });
}
Text.displayName = 'Skeleton.Text';
export function Circle({
  children,
  size,
  blend,
  style
}) {
  const {
    colors
  } = useTheme();
  const shimmer = useShimmer();
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [styles.circle, {
      backgroundColor: colors.contrast50,
      width: size,
      height: size,
      opacity: Animated.multiply(shimmer, blend ? 0.6 : 1)
    }, style],
    children: children
  });
}
Circle.displayName = 'Skeleton.Circle';
export function Pill({
  size,
  blend,
  style
}) {
  const {
    colors
  } = useTheme();
  const shimmer = useShimmer();
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [styles.pill, {
      backgroundColor: colors.contrast50,
      width: size * 1.618,
      height: size,
      opacity: Animated.multiply(shimmer, blend ? 0.6 : 1)
    }, style]
  });
}
Pill.displayName = 'Skeleton.Pill';

/**
 * Generic rectangular shimmering placeholder. Use for image/card/banner
 * placeholders where neither {@link Pill} (forced borderRadius: 999) nor
 * {@link Circle} fit. Defaults to a small borderRadius (8). Pass `0` for
 * sharp corners or any larger number / percentage string for custom shapes.
 */
export function Box({
  width,
  height,
  borderRadius = 8,
  blend,
  style
}) {
  const {
    colors
  } = useTheme();
  const shimmer = useShimmer();
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [{
      backgroundColor: colors.contrast50,
      width,
      height,
      borderRadius,
      opacity: Animated.multiply(shimmer, blend ? 0.6 : 1)
    }, style]
  });
}
Box.displayName = 'Skeleton.Box';
export function Col({
  children,
  style
}) {
  return /*#__PURE__*/_jsx(View, {
    style: [styles.col, style],
    children: children
  });
}
Col.displayName = 'Skeleton.Col';
export function Row({
  children,
  style
}) {
  return /*#__PURE__*/_jsx(View, {
    style: [styles.row, style],
    children: children
  });
}
Row.displayName = 'Skeleton.Row';
const styles = StyleSheet.create({
  textOuter: {
    flex: 1
  },
  textInner: {
    borderRadius: 8
  },
  circle: {
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 999
  },
  pill: {
    borderRadius: 999
  },
  col: {
    flex: 1
  },
  row: {
    flexDirection: 'row'
  }
});
//# sourceMappingURL=index.js.map