    import axios from "axios";
    import React from "react";
    import { Text, TouchableOpacity, View } from 'react-native'
    import { API_URL, reportAxiosError } from "../globals";
    import { useProfile } from "../hooks/useProfile";
    import { authStore } from "../stores/AuthStore";
    import UnauthorizedLayout from "./Auth/AuthLayout";
    import { PrimaryButton } from "./Auth/Buttons";
    import * as SecureStore from "expo-secure-store";
    import * as WebBrowser from 'expo-web-browser';

    /**
     * Props for the {@link Profile} component.
     */
    export interface ProfileProps {
        /**
         * The id of the logged in user.
         */
        userId: string
    }

    /**
     * The screen component that displays the user's profile. Gets user information from the {@link useProfile} hook.
     * @component
     */
    export const Profile: React.FC<ProfileProps> = ({userId}) => {
        const {profile, getProfileStatus} = useProfile(userId)

        /**
         * Logs out the current user by sending an XHR request to the OAuth 'revoke-token' endpoint.
         */
        const logout = async () => {
            try {
                const tokenParams = new URLSearchParams();
                tokenParams.append('client_id', 'atlas.mobile');
                tokenParams.append('token', authStore.accessToken as string);

                const response = await axios.post(API_URL + `/o/revoke-token/`, tokenParams, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                });

                await SecureStore.deleteItemAsync('access');
                authStore.setAccessTokenAsync(null);
            } catch (error) {
                reportAxiosError("Something went wrong when retrieving access token", error);
                console.log(error.response)
            }
        }

        /**
         * Opens up the company privacy policy in the browser.
         */
        const openPrivacyPolicy = async () => {
            await WebBrowser.openBrowserAsync(API_URL + "/privacy")
        }

        return (
            <UnauthorizedLayout>
                <View style={{flex: 1, justifyContent: "center", alignItems: 'center'}}>
                    <Text style={{color: 'white', marginBottom: 20}}>Username: {profile?.username}</Text>
                    <Text style={{color: 'white', marginBottom: 40}}>Email: {profile?.email}</Text>
                    <PrimaryButton onPress={logout} text="Logout" />
                </View>
                <TouchableOpacity onPress={openPrivacyPolicy}>
                    <Text style={{fontSize: 12, textDecorationLine: "underline", alignSelf: "flex-end", color: 'white'}}>Privacy policy</Text>
                </TouchableOpacity>
            </UnauthorizedLayout>
        )
    }