import type { HTMLAttributes, ReactNode } from "react";
import { usePlatformLanguage } from "../i18n/LanguageContext";
import type { PlatformInterfaceIdentityProps } from "../types";

export type ActionToolbarDensity = "compact" | "default";
export type ActionToolbarSurface = "plain" | "subtle" | "panel-header" | "section-header";
export type ActionToolbarWrap = "responsive" | "always" | "never";
export type ActionToolbarJustify = "start" | "between" | "end";

export type ActionToolbarProps = PlatformInterfaceIdentityProps & Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
  children: ReactNode;
  label?: string;
  density?: ActionToolbarDensity;
  justify?: ActionToolbarJustify;
  surface?: ActionToolbarSurface;
  wrap?: ActionToolbarWrap;
};

export default function ActionToolbar({
  children,
  label,
  density = "default",
  justify = "start",
  surface = "plain",
  wrap = "responsive",
  className = "",
  role,
  "aria-label": ariaLabel,
  interfaceId,
  helpContextId,
  helpModuleId,
  helpTopicId,
  ...props
}: ActionToolbarProps) {
  const { translateText } = usePlatformLanguage();
  const translatedLabel = label || ariaLabel ? translateText(label ?? ariaLabel ?? "") : undefined;

  return (
    <div
      {...props}
      className={[
        "action-toolbar",
        `action-toolbar-density-${density}`,
        `action-toolbar-justify-${justify}`,
        `action-toolbar-surface-${surface}`,
        `action-toolbar-wrap-${wrap}`,
        className
      ].filter(Boolean).join(" ")}
      role={role ?? (translatedLabel ? "toolbar" : undefined)}
      aria-label={translatedLabel}
      data-help-scope="toolbar"
      data-interface-id={interfaceId}
      data-help-context-id={helpContextId}
      data-help-module-id={helpModuleId}
      data-help-topic-id={helpTopicId}
    >
      {children}
    </div>
  );
}

export type ToolbarGroupProps = HTMLAttributes<HTMLDivElement> & {
  children: ReactNode;
  align?: "start" | "center" | "end";
  grow?: boolean;
};

export function ToolbarGroup({
  children,
  align = "start",
  grow = false,
  className = "",
  ...props
}: ToolbarGroupProps) {
  return (
    <div
      {...props}
      className={[
        "action-toolbar-group",
        `action-toolbar-group-${align}`,
        grow ? "action-toolbar-group-grow" : "",
        className
      ].filter(Boolean).join(" ")}
    >
      {children}
    </div>
  );
}

export function ToolbarSpacer({ className = "", ...props }: HTMLAttributes<HTMLSpanElement>) {
  return <span {...props} className={["action-toolbar-spacer", className].filter(Boolean).join(" ")} aria-hidden="true" />;
}