"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useAccordionAnimation = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeReanimated = require("react-native-reanimated");
var _core = require("../core");
const accordionBodySpacing = 16;
const useAccordionAnimation = ({
  defaultExpanded = false
} = {}) => {
  const [expanded, setExpanded] = (0, _react.useState)(defaultExpanded);
  // Disable animation when starting expanded
  const animationEnabled = (0, _reactNativeReanimated.useSharedValue)(!defaultExpanded);
  const bodyHeight = (0, _reactNativeReanimated.useSharedValue)(0);
  const toggleAccordion = (0, _react.useCallback)(() => {
    // Re-enable animation when the user interacts with the accordion
    animationEnabled.value = true; // eslint-disable-line functional/immutable-data
    setExpanded(expanded => !expanded);
  }, [animationEnabled]);
  const iconAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    transform: [{
      rotate: (0, _reactNativeReanimated.withSpring)(expanded ? "180deg" : "0deg", _core.IOSpringValues.accordion)
    }]
  }), [expanded]);

  // The code below is a re-adaptation of Dima Portenko's code:
  // https://github.com/dimaportenko/reanimated-collapsable-card-tutorial
  const onBodyLayout = (0, _react.useCallback)(event => {
    const {
      height: onLayoutHeight
    } = event.nativeEvent.layout;
    if (onLayoutHeight > 0 && bodyHeight.value !== onLayoutHeight) {
      bodyHeight.value = onLayoutHeight; // eslint-disable-line functional/immutable-data
    }
  }, [bodyHeight]);
  const bodyAnimatedHeight = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
    const nextHeight = expanded ? bodyHeight.value : 0;
    return {
      height: animationEnabled.value ? (0, _reactNativeReanimated.withSpring)(nextHeight, _core.IOSpringValues.accordion) : nextHeight
    };
  });
  const bodyAnimatedStyle = [bodyAnimatedHeight, styles.accordionCollapsableContainer];
  const bodyInnerStyle = styles.accordionBodyContainer;
  const progress = (0, _reactNativeReanimated.useDerivedValue)(() => {
    const to = expanded ? 1 : 0;
    return animationEnabled.value ? (0, _reactNativeReanimated.withSpring)(to, _core.IOSpringValues.accordion) : to;
  }, [expanded]);
  return {
    expanded,
    /**
     * Toggle the accordion expanded/collapsed state.
     */
    toggleAccordion,
    /**
     * The style to apply to the accordion icon.
     */
    iconAnimatedStyle,
    /**
     * Callback to execute on the body's inner container layout.
     */
    onBodyLayout,
    /**
     * The animated style to apply to the collapsible body container – it must be an `Animated.View`.
     */
    bodyAnimatedStyle,
    /**
     * The style to apply to the inner body container.
     */
    bodyInnerStyle,
    /**
     * The progress of the accordion animation, from 0 (collapsed) to 1 (expanded).
     */
    progress
  };
};
exports.useAccordionAnimation = useAccordionAnimation;
const styles = _reactNative.StyleSheet.create({
  accordionCollapsableContainer: {
    overflow: "hidden"
  },
  accordionBodyContainer: {
    position: "absolute",
    padding: accordionBodySpacing,
    width: "100%",
    paddingTop: 0
  }
});
//# sourceMappingURL=useAccordionAnimation.js.map