import { PinOff } from "lucide-react";
import { Link } from "react-router";
// buzzwareTech imports
import { useTranslation } from "@buzzwaretech/i18n";
import { ContextMenu } from "@buzzwaretech/propel/context-menu";
import { SetAsDefaultIcon } from "@buzzwaretech/propel/icons";
import { TabNavigationItem } from "@buzzwaretech/propel/tab-navigation";
// local imports
import type { TNavigationItem } from "./tab-navigation-root";
import type { TTabPreferences } from "./tab-navigation-utils";

export type TTabNavigationVisibleItemProps = {
  item: TNavigationItem;
  isActive: boolean;
  tabPreferences: TTabPreferences;
  onToggleDefault: (tabKey: string) => void;
  onHide: (tabKey: string) => void;
  itemRef?: (el: HTMLDivElement | null) => void;
};

/**
 * Individual visible tab navigation item with context menu
 * Handles right-click actions for setting default and hiding tabs
 */
export function TabNavigationVisibleItem({
  item,
  isActive,
  tabPreferences,
  onToggleDefault,
  onHide,
  itemRef,
}: TTabNavigationVisibleItemProps) {
  const { t } = useTranslation();
  const isDefault = item.key === tabPreferences.defaultTab;

  return (
    <div className="relative flex h-full items-center transition-all duration-300">
      {isActive && (
        <span className="absolute bottom-0 left-1/2 h-0.5 w-[80%] -translate-x-1/2 rounded-t-md bg-(--text-color-icon-primary) transition-all duration-300" />
      )}
      <div key={`${item.key}-measure`} ref={itemRef}>
        <ContextMenu>
          <ContextMenu.Trigger>
            <Link
              key={`${item.key}-${isActive ? "active" : "inactive"}`}
              to={item.href}
            >
              <TabNavigationItem isActive={isActive}>
                <span>{t(item.i18n_key)}</span>
              </TabNavigationItem>
            </Link>
          </ContextMenu.Trigger>
          <ContextMenu.Portal>
            <ContextMenu.Content positionerClassName="z-30">
              <ContextMenu.Item
                onClick={(e) => {
                  e.stopPropagation();
                  onToggleDefault(item.key);
                }}
                className="flex cursor-pointer items-center gap-2 text-secondary transition-colors"
              >
                <SetAsDefaultIcon className="size-3 shrink-0" />
                <span className="text-11">
                  {isDefault ? "Clear default" : "Set as default"}
                </span>
              </ContextMenu.Item>
              <ContextMenu.Item
                onClick={(e) => {
                  e.stopPropagation();
                  onHide(item.key);
                }}
                className="flex cursor-pointer items-center gap-2 text-secondary transition-colors"
              >
                <PinOff className="size-3 shrink-0" />
                <span className="text-11">Hide in more menu</span>
              </ContextMenu.Item>
            </ContextMenu.Content>
          </ContextMenu.Portal>
        </ContextMenu>
      </div>
    </div>
  );
}