"use client";

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

import { useTranslation } from "@plane/i18n";
import { Shapes } from "lucide-react";
import { cn } from "@plane/utils";
// components
import { TopNavPowerK } from "@/components/navigation";
import { useNodeDCBrandLinkUrl } from "@/hooks/use-nodedc-brand-link-url";
import { UserMenuRoot } from "@/components/workspace/sidebar/user-menu-root";
import { WorkspaceMenuRoot } from "@/components/workspace/sidebar/workspace-menu-root";
import { useHome } from "@/hooks/store/use-home";
import { ProjectsToolbarMenu } from "./projects-toolbar-menu";
import { ExpandedToolbarLink, ExpandedToolbarToolButton, ToolbarNotificationsButton } from "./toolbar-controls";
// types
import type { TProjectShellToolbarLayoutProps } from "./types";

export const ExpandedProjectShellToolbarLayout = ({
  draftsItem,
  homeItem,
  isWorkspaceHome,
  notificationsCount,
  profileItem,
  stickiesItem,
  onOpenNotifications,
}: TProjectShellToolbarLayoutProps) => {
  const { t } = useTranslation();
  const { toggleWidgetSettings } = useHome();
  const logoLinkUrl = useNodeDCBrandLinkUrl();

  return (
    <div className={cn("nodedc-expanded-toolbar-shell", { "nodedc-home-top-toolbar": isWorkspaceHome })}>
      <div className="nodedc-expanded-toolbar">
        <div className="nodedc-expanded-toolbar-top">
          <div className="nodedc-expanded-toolbar-left">
            <a href={logoLinkUrl} className="nodedc-expanded-brand-link" aria-label="NODE.DC">
              <img src="/nodedc-logo.svg" alt="NODE DC" className="nodedc-expanded-brand-logo" />
            </a>
          </div>

          <div className="nodedc-expanded-toolbar-center">
            <WorkspaceMenuRoot variant="expanded-toolbar" />
            <div className="nodedc-expanded-nav-group">
              <ExpandedToolbarLink item={homeItem} label="Главная" />
              <ProjectsToolbarMenu variant="expanded" />
              <ExpandedToolbarLink item={stickiesItem} label="Стикеры" />
              <ExpandedToolbarLink item={draftsItem} label="Черновики" />
            </div>
          </div>

          <div className="nodedc-expanded-toolbar-right">
            <div className="nodedc-expanded-user-group">
              <ExpandedToolbarLink item={profileItem} label="Профиль" />
              <ToolbarNotificationsButton
                label={t("notification.label")}
                notificationsCount={notificationsCount}
                onClick={onOpenNotifications}
                variant="expanded"
              />
              <UserMenuRoot variant="expanded-toolbar" />
            </div>
          </div>
        </div>

        <div className="nodedc-expanded-toolbar-tools-row">
          <div className="nodedc-expanded-breadcrumbs-slot" data-nodedc-expanded-breadcrumbs-slot />
          {!isWorkspaceHome && (
            <div className="nodedc-expanded-main-tool-cluster">
              <TopNavPowerK variant="expanded-toolbar" />
              <div className="nodedc-expanded-header-filters-slot" data-nodedc-expanded-header-filters-slot />
            </div>
          )}
          <div className="nodedc-expanded-action-tool-cluster">
            <div className="nodedc-expanded-tool-slot" data-nodedc-voice-task-toolbar-slot />
            {isWorkspaceHome && (
              <ExpandedToolbarToolButton label={t("home.manage_widgets")} onClick={() => toggleWidgetSettings(true)}>
                <Shapes className="size-4" />
              </ExpandedToolbarToolButton>
            )}
            <div className="nodedc-expanded-primary-action-slot" data-nodedc-expanded-primary-action-slot />
          </div>
        </div>
      </div>
    </div>
  );
};
