import { LaptopIcon, PersonIcon } from "@radix-ui/react-icons";
import { DropdownMenu, Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js";
import { useAtomValue } from "jotai";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { userAtom } from "../../../../AtomStore/AtomStore";
import LoginButton from "./LoginButton/LoginButton";
import LogoutButton from "./LogoutButton/LogoutButton";

export default function UserButton() {
    const user = useAtomValue(userAtom);
    const { t } = useTranslation();

    const navigate = useNavigate();

    return (
        <div className="">
            <DropdownMenu.Root>
                <DropdownMenu.Trigger>
                    <Tooltip content={"User menu"} className="w-fit">
                        <IconButton
                            size={"2"}
                            className="items-center my-auto rounded-full"
                            variant="ghost"
                        >
                            <PersonIcon />
                        </IconButton>
                    </Tooltip>
                </DropdownMenu.Trigger>

                <DropdownMenu.Content className="w-fit">
                    <DropdownMenu.Item onClick={() => navigate("/profile")}>
                        <div>
                            <Flex className="justify-between w-full gap-2">
                                <Icon>
                                    <PersonIcon />
                                </Icon>

                                <Text>{t("profile")}</Text>
                            </Flex>
                        </div>
                    </DropdownMenu.Item>

                    <DropdownMenu.Item onClick={() => navigate("/user/blogs")}>
                        <div>
                            <Flex className="justify-between gap-2">
                                <Icon>
                                    <LaptopIcon />
                                </Icon>
                                <Text>{t("yourBlogs")}</Text>
                            </Flex>
                        </div>
                    </DropdownMenu.Item>

                    <DropdownMenu.Separator />

                    <DropdownMenu.Item color={user ? "red" : "green"}>
                        {user ? <LogoutButton /> : <LoginButton />}
                    </DropdownMenu.Item>
                </DropdownMenu.Content>
            </DropdownMenu.Root>
        </div>
    );
}