import React, { memo, useMemo } from "react";

import AccountCircledIcon from "../../assets/symbols/AccountCircled";
import { useI18n } from "../../contexts/I18nContext";
import { useRouter } from "../../contexts/RouterContext";
import { useUser } from "../../contexts/UserContext";
import { LogoType } from "../../types";

import NavRailItem from "./NavRailItem";

interface UserProps {
  icon?: LogoType;
}

const User: React.FC<UserProps> = ({ icon }) => {
  const { user } = useUser();
  const { routes, getRoute } = useRouter();
  const { t } = useI18n();

  const UserIcon = icon ?? AccountCircledIcon;

  const [route] = useMemo(
    () => [getRoute("bananas.me:list"), getRoute("bananas.logout:create")!.title],
    [routes],
  );

  return user != null && route != null ? (
    <NavRailItem icon={UserIcon} route={route} title={t("Account")} />
  ) : null;
};

export default memo(User);