import React, { useContext, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Linking, Button } from 'react-native';
import { QRCodeContext } from '../types';
import { useAuthenticator } from '@aws-amplify/ui-react-native';
import { fetchUserAttributes } from 'aws-amplify/auth';
import useFetchUserAttributes from '../hooks/useFetchUserAttributes';

async function handleFetchUserAttributes() {
  try {
    const userAttributes = await fetchUserAttributes();
    console.log(userAttributes);
  } catch (error) {
    console.log(error);
  }
}

function SignOutButton() {
  const { signOut } = useAuthenticator();
  return <Button title="Sign Out" onPress={signOut} />;
}

const SettingsScreen: React.FC = () => {
  const qrCodeContext = useContext(QRCodeContext);
  const setQrCodes = qrCodeContext ? qrCodeContext.setQrCodes : () => {};
  const { userAttributes } = useFetchUserAttributes();

  const { user } = useAuthenticator((context) => {
    console.log(context.user);
    handleFetchUserAttributes();
    return [context.user]
  });
  

  const clearHistory = () => {
    setQrCodes([]);
  };

  const handleLinkPress = (url: string) => {
    Linking.openURL(url);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Settings</Text>
      <View style={styles.profileSection}>
        <Text style={styles.sectionTitle}>Profile</Text>
        {user ? (
          <View>
            <Text style={styles.userName}>Hello, {userAttributes?.name}</Text>
            <SignOutButton />
          </View>
        ) : (
          <TouchableOpacity style={styles.loginButton}>
            <Text style={styles.loginButtonText}>Log In</Text>
          </TouchableOpacity>
        )}
      </View>
      <View style={styles.divider} />
      <View style={styles.aboutUsSection}>
        <Text style={styles.sectionTitle}>About Us</Text>
        <TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/marketing/')}>
          <Text style={styles.linkText}>safeqr.github.io/marketing</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/privacy-policy')}>
          <Text style={styles.linkText}>Privacy Policy</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => handleLinkPress('https://safeqr.github.io/terms-of-service')}>
          <Text style={styles.linkText}>Terms Of Service</Text>
        </TouchableOpacity>
      </View>
      <Text style={styles.versionText}>Version 1.2</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  userName: {
    fontSize: 16,
    marginBottom: 10,
  },
  container: {
    flex: 1,
    backgroundColor: '#f8f0fc',
    padding: 20,
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#ff69b4',
    marginBottom: 20,
  },
  profileSection: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#000',
    marginBottom: 10,
  },
  loginButton: {
    backgroundColor: '#ff69b4',
    paddingVertical: 8,
    paddingHorizontal: 20,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'flex-start',
  },
  loginButtonText: {
    color: '#000',
    fontSize: 16,
  },
  divider: {
    height: 1,
    backgroundColor: '#ccc',
    marginVertical: 20,
  },
  aboutUsSection: {
    marginBottom: 20,
  },
  linkText: {
    fontSize: 16,
    color: '#0000ff',
    marginBottom: 10,
  },
  versionText: {
    textAlign: 'center',
    fontSize: 14,
    color: '#aaa',
    marginTop: 20,
  },
});

export default SettingsScreen;