import React, {useState} from 'react';
import {SafeAreaView, Text, ScrollView, TouchableOpacity} from 'react-native';

import {ActionSheet} from 'react-native-actionsheet-cstm';

const App = () => {
  const [showActionSheet, setShowActionSheet] = useState<boolean>(false);

  const onShowActionSheet = () => {
    setShowActionSheet(true);
  };
  const onCloseActionSheet = () => {
    setShowActionSheet(false);
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <Text style={{textAlign: 'center'}}>Components</Text>
      <ScrollView style={{flex: 1, marginTop: 50}}>
        <TouchableOpacity
          style={{
            flex: 1,
            height: 40,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#3880ff',
          }}
          onPress={onShowActionSheet}>
          <Text style={{color: '#fff'}}>Show Action Sheet</Text>
        </TouchableOpacity>

        <ActionSheet
          visible={showActionSheet}
          onClose={onCloseActionSheet}
          actionItems={[
            {
              text: 'Save',
              onPress: () => {
                console.log('Save');
              },
            },
            {
              text: 'Update',
              onPress: () => {
                console.log('Update');
              },
            },
            {
              text: 'Delete',
              textStyle: [{color: 'red'}],
              onPress: () => {
                console.log('Delete');
              },
            },
          ]}
        />
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;