"use strict";

import React, { useState, useEffect, useRef } from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Animated, TouchableWithoutFeedback, Modal } from 'react-native';
import { BurgerMenuIcon } from '../../assets/icons';
import Button from '../styled/Button';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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] = useState(false);
  const menuRef = useRef(null);
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const translateYAnim = useRef(new Animated.Value(-10)).current;
  const toggleMenu = () => {
    setIsOpen(prev => {
      return !prev;
    });
  };
  useEffect(() => {
    if (isOpen) {
      fadeAnim.setValue(1);
      translateYAnim.setValue(0);
      Animated.parallel([Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 200,
        useNativeDriver: true
      }), Animated.timing(translateYAnim, {
        toValue: 0,
        duration: 200,
        useNativeDriver: true
      })]).start();
    } else {
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 200,
        useNativeDriver: true
      }).start();
    }
  }, [isOpen]);
  return /*#__PURE__*/_jsxs(View, {
    style: styles.container,
    children: [openButton ? typeof openButton === 'function' ? openButton(toggleMenu) : (/*#__PURE__*/React.cloneElement(openButton, {
      onPress: toggleMenu,
      key: 'dropdown-button'
    })) :
    /*#__PURE__*/
    // <TouchableOpacity onPress={toggleMenu} style={styles.button}>
    //   {menuIcon ?? <Text style={styles.icon}>☰</Text>}
    // </TouchableOpacity>
    _jsx(Button, {
      style: {
        padding: 8,
        borderRadius: 16,
        backgroundColor: 'transparent'
      },
      color: "black",
      unstyled: true,
      EndIcon: /*#__PURE__*/_jsx(BurgerMenuIcon, {
        color: config?.colors?.primary
      }),
      onPress: toggleMenu
    }), isOpen && /*#__PURE__*/_jsx(Modal, {
      transparent: true,
      visible: isOpen,
      animationType: "fade",
      onRequestClose: () => {
        setIsOpen(false);
      },
      children: /*#__PURE__*/_jsx(TouchableOpacity, {
        style: styles.overlay,
        activeOpacity: 1,
        onPress: () => {
          setIsOpen(false);
          onClose && onClose();
        },
        children: /*#__PURE__*/_jsx(View, {
          style: styles.menuContainer,
          pointerEvents: "box-none",
          children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
            onPress: () => {},
            children: /*#__PURE__*/_jsx(Animated.View, {
              ref: menuRef,
              style: [styles.menu, positionMenu[position], {
                opacity: fadeAnim,
                transform: [{
                  translateY: translateYAnim
                }]
              }],
              children: options.map((option, index) => /*#__PURE__*/_jsxs(View, {
                style: styles.menuItemWrapper,
                children: [/*#__PURE__*/_jsxs(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__*/_jsx(View, {
                    style: {
                      width: 22,
                      alignItems: 'center'
                    },
                    children: option.icon
                  }), /*#__PURE__*/_jsx(Text, {
                    style: [styles.label, option?.styles],
                    children: option.label
                  })]
                }), index < options.length - 1 && /*#__PURE__*/_jsx(View, {
                  style: styles.divider
                })]
              }, `${option.label}-${index}`))
            })
          })
        })
      })
    })]
  });
};
export default DropdownMenu;
const styles = 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