import React, { useState, useRef, useContext } from 'react';
import { Platform, ActionSheetIOS, UIManager, findNodeHandle, View, TouchableOpacity, Text, } from 'react-native';
import { ThemeContext } from 'styled-components';
import { Icon } from '../../themes/components';
import borderRadius from '../../themes/foundations/borderRadius';
const OptionMenu = (props) => {
    const inputRef = useRef();
    const [open, setOpen] = useState(false);
    const { colors } = useContext(ThemeContext);
    const handleClick = (index) => {
        const { options } = props;
        for (let i = 0; i < options.length; i += 1) {
            if (index === i) {
                if (index === options.length - 1) {
                    const open = false;
                    setOpen(open);
                }
                else if (props.actions[i] !== null) {
                    props.actions[i]();
                }
            }
        }
    };
    const handlePress = () => {
        const { options } = props;
        if (Platform.OS === 'ios') {
            let destructiveIndex = -1;
            if (Number.isInteger(props.destructiveIndex)
                && props.destructiveIndex >= 0) {
                destructiveIndex = props.destructiveIndex;
            }
            ActionSheetIOS.showActionSheetWithOptions({
                options,
                destructiveButtonIndex: destructiveIndex,
                cancelButtonIndex: options.length - 1,
            }, (buttonIndex) => {
                handleClick(buttonIndex);
            });
        }
        else if (Platform.OS === 'android') {
            UIManager.showPopupMenu(findNodeHandle(inputRef.current), options, () => console.log('something went wrong with the popup menu'), (e, i) => {
                handleClick(i);
            });
        }
    };
    const { options } = props;
    const optionsUI = open ? (<View style={{
        position: 'absolute',
        bottom: '100%',
        right: '50%',
        flex: 1,
        elevation: 3,
        shadowColor: 'black',
        shadowOpacity: 0.3,
        shadowOffset: { width: 0, height: 2 },
        shadowRadius: 4,
        borderRadius: borderRadius.small,
        backgroundColor: 'white',
    }}>
			{options.map((option, index) => (<View key={option}>
					<TouchableOpacity style={{ padding: 10 }} onPress={() => handleClick(index)}>
						<Text style={{ textAlign: 'center' }}>{option}</Text>
					</TouchableOpacity>

					{index < props.options.length - 1 && (<View style={{
        flex: 1,
        height: 1,
        backgroundColor: 'lightgray',
    }}/>)}
				</View>))}
		</View>) : null;
    return (<View>
			<View>
				<TouchableOpacity ref={inputRef} onPress={handlePress}>
					<Icon boxSize="xl" ml={5} name="dots-vertical" fill={colors.textPrimary[300]}/>
				</TouchableOpacity>
			</View>
			{optionsUI}
		</View>);
};
export default OptionMenu;
//# sourceMappingURL=index.js.map