function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useCallback, useMemo, useEffect, useState } from 'react';
import { ActivityIndicator, TouchableWithoutFeedback, View } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, useDerivedValue, withTiming, runOnUI, runOnJS } from 'react-native-reanimated';
import Chevron from '../chevron';
import { styles } from './styles';
import { useLayout } from '../hooks';

const AnimatedAccordion = ({
  isArrow = true,
  sizeIcon = 16,
  disabled = false,
  colorIcon = '#16182b',
  initExpand = false,
  handleIcon,
  styleChevron,
  contentHeight = 0,
  renderContent,
  otherProperty,
  onChangeState,
  styleTouchable,
  configExpanded,
  styleContainer,
  configCollapsed,
  isStatusFetching = false,
  isUnmountedContent = false,
  activeBackgroundIcon = '#e5f6ff',
  handleCustomTouchable,
  onAnimatedEndExpanded,
  onAnimatedEndCollapsed,
  handleContentTouchable,
  inactiveBackgroundIcon = '#fff0e4',
  handleIndicatorFetching
}) => {
  const [layout, onLayout] = useLayout(0);
  const open = useSharedValue(initExpand);
  const size = useSharedValue(contentHeight);
  const [isUnmounted, setUnmountedContent] = useState(isUnmountedContent);
  useEffect(() => {
    runOnUI(() => {
      'worklet';

      if (initExpand && layout) {
        size.value = layout.height;
      }
    })();
  }, [initExpand, layout, layout.height, size]);
  useEffect(() => {
    runOnUI(() => {
      'worklet';

      if (!isStatusFetching && layout) {
        size.value = layout.height;
      }
    })();
  }, [isStatusFetching, layout, size]);
  const progress = useDerivedValue(() => open.value ? withTiming(1, configExpanded, () => {
    onAnimatedEndExpanded && runOnJS(onAnimatedEndExpanded)();
  }) : withTiming(0, configCollapsed, () => {
    onAnimatedEndCollapsed && runOnJS(onAnimatedEndCollapsed)();
    if (isUnmountedContent) runOnJS(setUnmountedContent)(true);
  }));
  const style = useAnimatedStyle(() => ({
    height: size.value * progress.value + 1,
    opacity: progress.value === 0 ? 0 : 1
  }));
  const handleCollapsed = useCallback(() => {
    if (size.value === 0) {
      runOnUI(setUnmountedContent)(false);
      runOnUI(() => {
        'worklet';

        size.value = layout === null || layout === void 0 ? void 0 : layout.height;
      })();
    }

    open.value = !open.value;
    onChangeState && onChangeState(!open.value);
  }, [layout === null || layout === void 0 ? void 0 : layout.height, onChangeState, open, size]);
  const hasLoader = useMemo(() => isStatusFetching ? handleIndicatorFetching ? handleIndicatorFetching() : /*#__PURE__*/React.createElement(ActivityIndicator, {
    size: "small",
    color: "#AAAAAA",
    style: styles.indicator
  }) : /*#__PURE__*/React.createElement(Chevron, {
    sizeIcon: sizeIcon,
    progress: progress,
    colorIcon: colorIcon,
    handleIcon: handleIcon,
    styleChevron: styleChevron,
    activeBackgroundIcon: activeBackgroundIcon,
    inactiveBackgroundIcon: inactiveBackgroundIcon
  }), [activeBackgroundIcon, colorIcon, handleIcon, handleIndicatorFetching, inactiveBackgroundIcon, isStatusFetching, progress, sizeIcon, styleChevron]);
  const renderHeader = useCallback(() => {
    return handleCustomTouchable ? handleCustomTouchable() : /*#__PURE__*/React.createElement(Animated.View, {
      style: [styles.header, styleTouchable]
    }, handleContentTouchable ? handleContentTouchable() : null, isArrow ? hasLoader : null);
  }, [handleCustomTouchable, styleTouchable, handleContentTouchable, isArrow, hasLoader]);
  const content = useCallback(() => {
    if (isUnmounted && !open.value) {
      return null;
    }

    return renderContent ? renderContent() : null;
  }, [isUnmounted, open.value, renderContent]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, _extends({
    onPress: handleCollapsed,
    disabled: disabled || isStatusFetching
  }, otherProperty), renderHeader()), /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.content, style]
  }, /*#__PURE__*/React.createElement(View, {
    onLayout: onLayout,
    style: [styles.container, styleContainer]
  }, content())));
};

export default AnimatedAccordion;
//# sourceMappingURL=accordion.js.map