/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import Link from "next/link";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { InboxIcon } from "@plane/propel/icons";
import { Tooltip } from "@plane/propel/tooltip";
import useSWR from "swr";
import { TopNavPowerK } from "@/components/navigation";
import { UserMenuRoot } from "@/components/workspace/sidebar/user-menu-root";
import { useWorkspaceNotifications } from "@/hooks/store/notifications";

export const SidebarUtilityRail = observer(function SidebarUtilityRail() {
  const { workspaceSlug } = useParams();
  const { unreadNotificationsCount, getUnreadNotificationsCount } = useWorkspaceNotifications();

  useSWR(
    workspaceSlug ? "WORKSPACE_UNREAD_NOTIFICATION_COUNT" : null,
    workspaceSlug ? () => getUnreadNotificationsCount(workspaceSlug.toString()) : null
  );

  const isMentionsEnabled = unreadNotificationsCount.mention_unread_notifications_count > 0;
  const totalNotifications = isMentionsEnabled
    ? unreadNotificationsCount.mention_unread_notifications_count
    : unreadNotificationsCount.total_unread_notifications_count;

  return (
    <div className="flex items-end justify-between gap-3">
      <div className="flex flex-col items-start gap-2 pl-2.5">
        <TopNavPowerK variant="sidebar" />
        <Tooltip tooltipContent="Уведомления" position="right">
          <Link
            href={`/${workspaceSlug?.toString()}/notifications/`}
            className="relative flex size-8 items-center justify-center rounded-full border border-white/8 bg-white/[0.04] text-tertiary backdrop-blur-[18px] transition-all hover:bg-white/[0.07] hover:text-primary"
          >
            <InboxIcon className="size-4" />
            {totalNotifications > 0 && (
              <span className="absolute top-1.5 right-1.5 size-2 rounded-full bg-danger-primary" />
            )}
            <span className="sr-only">Уведомления</span>
          </Link>
        </Tooltip>
        <Tooltip tooltipContent="Профиль" position="right">
          <div>
            <UserMenuRoot variant="sidebar-utility" />
          </div>
        </Tooltip>
      </div>
    </div>
  );
});
