import { useTranslation } from "react-i18next";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { DropdownMenu, useWindowSize } from "@nimles/react-web-components";
import { useTheme } from "@emotion/react";
import { signOutUser, useAppDispatch } from "@nimles/react-redux";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/free-solid-svg-icons";
import { navigate } from "./Link";
import styled from "@emotion/styled";
const User = styled.div `
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
`;
export const UserMenu = () => {
    const dispatch = useAppDispatch();
    const [] = useState(false);
    const { t } = useTranslation();
    const { user } = useSelector(({ currentUser }) => currentUser);
    const theme = useTheme();
    const size = useWindowSize();
    const handleSignOut = () => {
        dispatch(signOutUser());
    };
    const items = [
        {
            label: "Profile",
            onClick: () => navigate("/my-pages/profile"),
        },
        {
            label: "Orders",
            onClick: () => navigate("/my-pages/orders"),
        },
        {
            label: "Carts",
            onClick: () => navigate("/my-pages/carts"),
        },
        {
            label: t("action.signOut"),
            onClick: handleSignOut,
        },
    ];
    return user && user.username ? (<DropdownMenu align="right" items={items}>
      {size.width && size.width > theme.thresholds.sm ? (<User>
          <div>
            {user.firstName} {user.lastName}
          </div>
          <small>{user.username}</small>
        </User>) : (<FontAwesomeIcon icon={faUser}/>)}
    </DropdownMenu>) : null;
};
//# sourceMappingURL=UserMenu.jsx.map