import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
import { ProfileCard } from "@/app/components/ProfileCard/ProfileCard";
import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
import { useBlacklist } from "@/app/providers/BlacklistProvider/useBlacklist";
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
import { Text } from "@mantine/core";

interface OtherProfileProps {
    publicKey: string;
}

export function OtherProfile(props : OtherProfileProps) {
    const [userInfo] = useUserInformation(props.publicKey);
    const [blocked, blockUser, unblockUser] = useBlacklist(userInfo.publicKey);

    return (
        <>
            <Breadcrumbs text={userInfo.title}></Breadcrumbs>
            <InternalScreen>
                <ProfileCard 
                    title={userInfo.title} 
                    publicKey={userInfo.publicKey}
                    username={userInfo.username}
                    verified={userInfo.verified}
                ></ProfileCard>
                {userInfo.username.trim() != "" && (
                    <>
                        <SettingsInput.Copy mt={'sm'} hit="Username" value={
                            userInfo.username
                        } placeholder="Public"></SettingsInput.Copy>
                        <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                            Username for search user or send message.
                        </Text>    
                    </>
                )}            
                <SettingsInput.Copy mt={'sm'} hit="Public Key" value={
                    userInfo.publicKey
                } placeholder="Public"></SettingsInput.Copy>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    This is user public key. If user haven't set a @username yet, you can send message using your public key.
                </Text>
                {blocked && (<>
                    <SettingsInput.Clickable mt={'sm'} c={'green'}
                    hit="Unblock user" 
                    onClick={unblockUser}
                    rightChevronHide
                    >
                    </SettingsInput.Clickable>  
                    <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                        If you want the user to be able to send you messages again, you can unblock them. You can block them later.                        
                    </Text>                   
                </>)}
                {!blocked && (<>
                    <SettingsInput.Clickable mt={'sm'} c={'red'}
                        hit="Block this user" 
                        onClick={blockUser}
                        rightChevronHide
                    >
                    </SettingsInput.Clickable>  
                    <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                        The person will no longer be able to message you if you block them. You can unblock them later.
                    </Text>   
                </>)}                  
            </InternalScreen>
        </>
    );
}