import { usePrivateKeyHash } from "@/app/providers/AccountProvider/usePrivateKeyHash";
import { PacketSearch, PacketSearchUser } from "@/app/providers/ProtocolProvider/protocol/packets/packet.search";
import { usePacket } from "@/app/providers/ProtocolProvider/usePacket";
import { useSender } from "@/app/providers/ProtocolProvider/useSender";
import { Anchor } from "@mantine/core";
import { useState } from "react";
import classes from './UserMention.module.css';
import { cx } from "@/app/utils/style";
import { useNavigate } from "react-router-dom";

export interface UserMentionProps {
    username: string;
    color?: string;
}

export function UserMention(props : UserMentionProps) {
    const send = useSender();
    const privateKey = usePrivateKeyHash();
    const [loading, setLoading] = useState(false);
    const [fail, setFail] = useState(false);
    const [vibrate, setVibrate] = useState(false);
    const navigate = useNavigate();

    usePacket(0x03, (packet: PacketSearch) => {
        if(!loading){
            return;
        }
        if(fail){
            vibrateCall();
            return;
        }
        setLoading(false);
        let users = packet.getUsers();
        if(users.length <= 0){
            vibrateCall();
            setFail(true);
            return;
        }
        const user = findMatchuser(users);
        if(!user){
            vibrateCall();
            setFail(true);
            return;
        }
        navigate(`/main/chat/${user.publicKey}`);
    }, [props.username, loading, fail]);

    const findMatchuser = (users: PacketSearchUser[]) => {
        for(let user of users){
            if(user.username === props.username.replace('@', '')){
                return user;
            }
        }
        return null;
    }

    const onClick = () => {
        if(fail){
            vibrateCall();
            return;
        }
        let packet = new PacketSearch();
        packet.setSearch(props.username.replace('@', ''));
        packet.setPrivateKey(privateKey);
        send(packet);
        setLoading(true);
    }

    const vibrateCall = () => {
        if(vibrate){
            return;
        }
        setVibrate(true);
        setTimeout(() => {
            setVibrate(false);
        }, 300);
    }

    return (
        <Anchor className={cx(
            classes.mention,
            loading && classes.skeleton,
            vibrate && classes.fail_vibrate
        )} onClick={onClick} c={props.color} size="sm">{props.username}</Anchor>
    );
}