"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _icons = require("../../assets/icons");
var _Button = _interopRequireDefault(require("../styled/Button"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const positionMenu = {
  right: {
    top: 95,
    right: 10
  },
  left: {
    top: 95,
    left: 0
  },
  rightBottom: {
    bottom: 95,
    right: 10
  },
  leftBottom: {
    bottom: 95,
    left: 10
  }
};
const DropdownMenu = ({
  options,
  openButton,
  position = 'right',
  menuIcon,
  config,
  onClose
}) => {
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
  const menuRef = (0, _react.useRef)(null);
  const fadeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const translateYAnim = (0, _react.useRef)(new _reactNative.Animated.Value(-10)).current;
  const toggleMenu = () => {
    setIsOpen(prev => {
      return !prev;
    });
  };
  (0, _react.useEffect)(() => {
    if (isOpen) {
      fadeAnim.setValue(1);
      translateYAnim.setValue(0);
      _reactNative.Animated.parallel([_reactNative.Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 200,
        useNativeDriver: true
      }), _reactNative.Animated.timing(translateYAnim, {
        toValue: 0,
        duration: 200,
        useNativeDriver: true
      })]).start();
    } else {
      _reactNative.Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 200,
        useNativeDriver: true
      }).start();
    }
  }, [isOpen]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: styles.container,
    children: [openButton ? typeof openButton === 'function' ? openButton(toggleMenu) : (/*#__PURE__*/_react.default.cloneElement(openButton, {
      onPress: toggleMenu,
      key: 'dropdown-button'
    })) :
    /*#__PURE__*/
    // <TouchableOpacity onPress={toggleMenu} style={styles.button}>
    //   {menuIcon ?? <Text style={styles.icon}>☰</Text>}
    // </TouchableOpacity>
    (0, _jsxRuntime.jsx)(_Button.default, {
      style: {
        padding: 8,
        borderRadius: 16,
        backgroundColor: 'transparent'
      },
      color: "black",
      unstyled: true,
      EndIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.BurgerMenuIcon, {
        color: config?.colors?.primary
      }),
      onPress: toggleMenu
    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
      transparent: true,
      visible: isOpen,
      animationType: "fade",
      onRequestClose: () => {
        setIsOpen(false);
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
        style: styles.overlay,
        activeOpacity: 1,
        onPress: () => {
          setIsOpen(false);
          onClose && onClose();
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: styles.menuContainer,
          pointerEvents: "box-none",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
            onPress: () => {},
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
              ref: menuRef,
              style: [styles.menu, positionMenu[position], {
                opacity: fadeAnim,
                transform: [{
                  translateY: translateYAnim
                }]
              }],
              children: options.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                style: styles.menuItemWrapper,
                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
                  style: styles.menuItem,
                  onPress: async () => {
                    setIsOpen(false);
                    onClose && onClose();
                    setTimeout(() => {
                      try {
                        option.onClick();
                      } catch (error) {
                        console.error('Error in option.onClick:', error);
                      }
                    }, 200);
                  },
                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                    style: {
                      width: 22,
                      alignItems: 'center'
                    },
                    children: option.icon
                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                    style: [styles.label, option?.styles],
                    children: option.label
                  })]
                }), index < options.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                  style: styles.divider
                })]
              }, `${option.label}-${index}`))
            })
          })
        })
      })
    })]
  });
};
var _default = exports.default = DropdownMenu;
const styles = _reactNative.StyleSheet.create({
  container: {
    position: 'relative',
    zIndex: 100
  },
  overlay: {
    flex: 1,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.3)'
  },
  menuContainer: {
    flex: 1,
    width: '100%',
    height: '100%',
    position: 'relative'
  },
  button: {
    padding: 10,
    backgroundColor: '#0052CD',
    borderRadius: 8
  },
  icon: {
    color: '#fff',
    fontSize: 24
  },
  menu: {
    position: 'absolute',
    backgroundColor: '#fcfcfc',
    borderRadius: 8,
    paddingHorizontal: 16,
    paddingVertical: 8,
    minWidth: 150,
    zIndex: 1000,
    elevation: 10,
    // Android
    shadowColor: '#121219',
    // iOS
    shadowOffset: {
      width: 0,
      height: 4
    },
    shadowOpacity: 0.3,
    shadowRadius: 6
  },
  menuItemWrapper: {
    display: 'flex',
    flexDirection: 'column'
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 8
  },
  label: {
    fontSize: 16,
    marginLeft: 10
  },
  divider: {
    height: 1,
    width: '100%',
    backgroundColor: '#0052cd0d'
  }
});
//# sourceMappingURL=DropdownMenu.js.map