import React, {useState} from 'react';
import {
  NativeModules,
  StyleSheet,
  View,
  StatusBar,
  Text,
  TouchableOpacity,
  ActionSheetIOS,
  Platform,
  Button,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const App = () => {
  const {CallNative} = NativeModules;

  if (Platform.OS === 'ios') {
    CallNative.connect();
  }

  Icon.loadFont();

  const IconButton = ({onPress, iconName, iconSize, iconColor}: any) => {
    return (
      <TouchableOpacity onPress={onPress}>
        <Icon
          name={iconName}
          size={iconSize}
          color={iconColor}
          style={styles.iconButton}
        />
      </TouchableOpacity>
    );
  };

  const [isActionSheetVisible, setActionSheetVisible] = useState(false);

  const handlePress = () => {
    showActionMenu();
  };

  const showActionMenu = () => {
    if (Platform.OS === 'ios') {
      const options = [
        'Features'
      ];

      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: options,
          cancelButtonIndex: options.length - 1,
          // destructiveButtonIndex: 2, // Index of the destructive option (optional)
          tintColor: 'blue', // Color of the option text (optional)
        },
        buttonIndex => {
          // Handle the selected option
          //FEATURES1
          else {
            // Cancel button or tapping outside the action menu
          }
        },
      );
    } else {
      // Android implementation
      setActionSheetVisible(true);
    }
  };

  const handleActionSheetPress = async (buttonIndex: any) => {
    setActionSheetVisible(false);
    //FEATURES2
  };

  return (
    <View style={styles.container}>
      <StatusBar animated={true} barStyle="default" showHideTransition="fade" />
      <View style={styles.viewAppBar}>
        <Text style={styles.textTitle}>NexilisSampleCode</Text>
        <IconButton
          onPress={handlePress}
          iconName="ellipsis-horizontal"
          iconSize={30}
          iconColor="white"
        />
      </View>
      {isActionSheetVisible && (
        <View>
          //FEATURES3
          <Button title="Cancel" onPress={() => setActionSheetVisible(false)} />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  loginButtonSection: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    flex: 1,
  },
  viewAppBar: {
    width: '100%',
    height: '10%',
    backgroundColor: '#3669ad',
    justifyContent: 'center',
    position: 'relative',
  },
  textTitle: {
    position: 'absolute',
    left: '30%',
    color: 'white',
    fontSize: 18,
    top: '50%',
  },
  iconButton: {
    position: 'absolute',
    right: '5%',
    top: -8,
    color: 'white',
  },
});

export default App;