import Styles from "@/constants/Styles";
import { View } from "react-native";
import Animated, { useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from "react-native-reanimated";

type Props = {
   isExpanded: any,
   children: React.ReactNode,
   viewKey: string,
   duration: number,
}

export default function ItemAccordion({ isExpanded, children, viewKey, duration = 500, }: Props) {
   const height = useSharedValue(0);

   const derivedHeight = useDerivedValue(() =>
      withTiming(height.value * Number(isExpanded.value), {
         duration,
      })
   );
   const bodyStyle = useAnimatedStyle(() => ({
      height: derivedHeight.value,
   }));

   return (
      <Animated.View
         key={`accordionItem_${viewKey}`}
         style={[Styles.animatedView, bodyStyle]}>
         <View
            onLayout={(e) => {
               height.value = e.nativeEvent.layout.height;
            }}
            style={Styles.wrapperAccordion}>
            {children}
         </View>
      </Animated.View>
   )
}