"use strict";

import { useCallback, useState } from "react";
import { StyleSheet } from "react-native";
import { useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from "react-native-reanimated";
import { IOSpringValues } from "../core";
const accordionBodySpacing = 16;
export const useAccordionAnimation = ({
  defaultExpanded = false
} = {}) => {
  const [expanded, setExpanded] = useState(defaultExpanded);
  // Disable animation when starting expanded
  const animationEnabled = useSharedValue(!defaultExpanded);
  const bodyHeight = useSharedValue(0);
  const toggleAccordion = 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 = useAnimatedStyle(() => ({
    transform: [{
      rotate: withSpring(expanded ? "180deg" : "0deg", 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 = 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 = useAnimatedStyle(() => {
    const nextHeight = expanded ? bodyHeight.value : 0;
    return {
      height: animationEnabled.value ? withSpring(nextHeight, IOSpringValues.accordion) : nextHeight
    };
  });
  const bodyAnimatedStyle = [bodyAnimatedHeight, styles.accordionCollapsableContainer];
  const bodyInnerStyle = styles.accordionBodyContainer;
  const progress = useDerivedValue(() => {
    const to = expanded ? 1 : 0;
    return animationEnabled.value ? withSpring(to, 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
  };
};
const styles = StyleSheet.create({
  accordionCollapsableContainer: {
    overflow: "hidden"
  },
  accordionBodyContainer: {
    position: "absolute",
    padding: accordionBodySpacing,
    width: "100%",
    paddingTop: 0
  }
});
//# sourceMappingURL=useAccordionAnimation.js.map