import React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { Icon } from 'react-native-elements';
import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';

const OptionsButton = ({ onPress }) => (
  <TouchableOpacity onPress={onPress} >
    <Icon type='entypo' name='dots-three-vertical' size={24} iconStyle={{ textAlign: 'left' }} color='#535353' />
  </TouchableOpacity>
);

const OptionsMenu = ({ setMenu, showMenu, onPress }) => (
  <View style={styles.optionsMenu}>
    <Menu ref={setMenu} button={<OptionsButton onPress={showMenu} />}>
      <MenuItem onPress={onPress} style={{ height: 50 }}>Show QR Code</MenuItem>
      <MenuDivider />
      <MenuItem onPress={onPress} style={{ height: 50 }}>Share Profile</MenuItem>
    </Menu>
  </View>
);

const styles = {
  optionsMenu: {
    marginTop: 10
  }
};

export default OptionsMenu;
