desktop/app/views/Profile/MyProfile.tsx

import { ColorSwatch, Text, useComputedColorScheme } from "@mantine/core";
import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
import { useState } from "react";
import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
import { useNavigate } from "react-router-dom";
import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
import { PacketUserInfo } from "@/app/providers/ProtocolProvider/protocol/packets/packet.userinfo";
import { PacketResult, ResultCode } from "@/app/providers/ProtocolProvider/protocol/packets/packet.result";
import { ProfileCard } from "@/app/components/ProfileCard/ProfileCard";
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
import { OnlineState } from "@/app/providers/ProtocolProvider/protocol/packets/packet.onlinestate";
import { usePrivateKeyHash } from "@/app/providers/AccountProvider/usePrivateKeyHash";
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
import { useSender } from "@/app/providers/ProtocolProvider/useSender";
import { usePacket } from "@/app/providers/ProtocolProvider/usePacket";
import { SettingsIcon } from "@/app/components/SettingsIcon/SettingsIcon";
import { IconBrush, IconHomeCog, IconLogout, IconRefresh } from "@tabler/icons-react";
import { useLogout } from "@/app/providers/AccountProvider/useLogout";
import { RosettaPower } from "@/app/components/RosettaPower/RosettaPower";

export function MyProfile() {
    const publicKey = usePublicKey();
    const [userInfo, updateUserInformation] = useUserInformation(publicKey);
    const privateKey = usePrivateKeyHash();
    const [title, setTitle] = useState(userInfo.title);
    const [username, setUsername] = useState(userInfo.username);
    const colorScheme = useComputedColorScheme();
    const navigate = useNavigate();
    const send = useSender();
    const logout = useLogout();

    const saveProfileData = () => {
        let packet = new PacketUserInfo();
        packet.setUsername(username);
        packet.setTitle(title);
        packet.setPrivateKey(privateKey);
        send(packet);
    }
    usePacket(0x2, function (packet : PacketResult) {
        switch (packet.getResultCode()) {
            case ResultCode.SUCCESS:
                updateUserInformation({
                    username: username,
                    title: title,
                    publicKey: publicKey,
                    online: OnlineState.OFFLINE,
                    verified: userInfo.verified
                });
                break;
        }
    }, [title, username]);

    return (
        <>
            <Breadcrumbs onClick={saveProfileData} text="Profile"></Breadcrumbs>
            <InternalScreen>
                <ProfileCard 
                    title={title} 
                    publicKey={publicKey} 
                    username={username}
                    verified={userInfo.verified}
                    ></ProfileCard>
                <SettingsInput.Group>
                    <SettingsInput.Default
                        hit="Your name"
                        placeholder="ex. Freddie Gibson"
                        value={title}
                        onChange={(e) => setTitle(e.target.value)}
                    ></SettingsInput.Default>
                    <SettingsInput.Default
                        hit="Username"
                        value={username}
                        placeholder="ex. freddie871"
                        onChange={(e) => setUsername(e.target.value)}
                    ></SettingsInput.Default>
                </SettingsInput.Group>
                <SettingsInput.Copy mt={'sm'} hit="Public Key" value={
                    publicKey
                } placeholder="Public"></SettingsInput.Copy>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    This is your public key. If you haven't set a @username yet, you can ask a friend to message you using your public key.
                </Text>
                <SettingsInput.Clickable
                    settingsIcon={
                        <SettingsIcon bg="var(--mantine-color-lime-6)" 
                        icon={IconRefresh}>
                        </SettingsIcon>
                    }
                    hit="Updates"
                    onClick={() => navigate('/main/update')}
                    mt={'sm'}
                ></SettingsInput.Clickable>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    You can check for new versions of the app here. Updates may include security improvements and new features.
                </Text>                
                <SettingsInput.Clickable 
                    settingsIcon={
                        <SettingsIcon bg={'indigo'} 
                        icon={IconBrush}>
                        </SettingsIcon>
                    }
                onClick={() => navigate('/main/theme')} mt={'sm'} hit="Theme" rightSection={
                    <ColorSwatch color={
                        colorScheme == 'light' ? '#000' : '#FFF'
                    } size={20}></ColorSwatch>
                }></SettingsInput.Clickable>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    You can change the theme.
                </Text>
                <SettingsInput.Clickable
                    settingsIcon={
                        <SettingsIcon bg="grape" 
                        icon={IconHomeCog}>
                        </SettingsIcon>
                    }
                    hit="Safety"
                    onClick={() => navigate('/main/safety')}
                    mt={'sm'}
                ></SettingsInput.Clickable>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    You can learn more about your safety on the safety page, 
                    please make sure you are viewing the screen alone <strong>before proceeding to the safety page</strong>.
                </Text>
                <SettingsInput.Clickable 
                    settingsIcon={
                        <SettingsIcon bg={'red'} 
                        icon={IconLogout}>
                        </SettingsIcon>
                    }
                    hit={'Logout'}
                    mt={'sm'}
                    onClick={logout}
                    rightChevronHide
                    c={'red'}
                ></SettingsInput.Clickable>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    Logging out of your account. After logging out, you will be redirected to the password entry page.
                </Text>
                <RosettaPower mt={'lg'}></RosettaPower>  
            </InternalScreen>
        </>
    );
}