import React from 'react';
import {StyleSheet, Button, View} from 'react-native';
import Modal from 'react-native-modal';
import ChatWidget from '@papercups-io/chat-widget-native';

export default function App() {
  const [isModalVisible, setModalVisible] = React.useState(false);

  return (
    <View style={{flex: 1, padding: 24}}>
      <Button title="Open chat" onPress={() => setModalVisible(true)} />

      <Modal
        isVisible={isModalVisible}
        onBackdropPress={() => setModalVisible(false)}
      >
        <View style={styles.modal}>
          <ChatWidget
            // Update this with your own account token!
            accountId="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
            title="Welcome to Papercups!"
            subtitle="We'll reply as soon as we can 😊"
            greeting="Hi there! :wave: Have any questions?"
            customer={{
              // Update this with a unique identifer for the customer/user,
              // so that we can load the message history if you've chatted
              // with this person in the past!
              external_id: 'xxxxxxxx',
              email: '[email protected]',
              name: 'Alex',
            }}
          />
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  modal: {
    flex: 1,
    borderRadius: 4,
    overflow: 'hidden',
  },
});