//import liraries
import React, {Component, useEffect, useState} from 'react';
import {View, Text, StyleSheet, Button,TouchableOpacity} from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';
import { showSuccess } from '../../utils/helperFunction';
// import Clipboard from '@react-native-community/clipboard';
// import Clipboard from '@react-native-clipboard/clipboard';
// import Clipboard from 'react-native-advanced-clipboard';
// create a component
const Token = ({navigation}) => {
  const [copiedText, setCopiedText] = useState('');

  const [loading, setloading] = useState(true);
  const [token, setToken] = useState('');
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://smilechaincore.vercel.app/token');
        const json = await response.json();
        setToken(json.token.match(/.{1,4}/g).join('  '));
        setloading(false);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);

  const copyToClipboard = () => {
    showSuccess("Copied !");
    Clipboard.setString(token);
  };

  return loading ? (
    <View></View>
  ) : (
    <View
      style={{
        flex: 1,
        width: '70%',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <Text>Your Encryption Key</Text>
      <Text
        style={{fontFamily: 'Courier New', fontWeight: 'bold', fontSize: 24}}>
        {token}
      </Text>

      <Button title='📋 Copy To Clipboard' onPress={copyToClipboard}></Button>

      <Button title='continue' onPress={()=> navigation.navigate('Signup', { token })}></Button>
    </View>
  );
};

// define your styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

//make this component available to the app
export default Token;