import type { ReactElement } from "react";
import type { RouteId } from "../../types/domain";

interface ActivityRailProps {
  route: RouteId;
  onRoute(route: RouteId): void;
  disabled?: boolean;
}

const routes: Array<{ id: RouteId; label: string; title: string }> = [
  { id: "workspace", label: "工作台", title: "工作台" },
  { id: "performance", label: "性能", title: "性能监控" },
  { id: "skills", label: "Skills", title: "Skills" },
  { id: "management", label: "管理", title: "管理" },
  { id: "access", label: "授权", title: "授权管理" },
  { id: "gate", label: "内部复核", title: "内部复核" },
  { id: "help", label: "使用说明", title: "使用说明" },
  { id: "settings", label: "设置", title: "设置" }
];
const settingsRoute = routes.find((item) => item.id === "settings");

export function ActivityRail({ route, onRoute, disabled = false }: ActivityRailProps): ReactElement {
  return (
    <aside className="activity-rail" id="activity-rail" aria-label="工作台活动栏">
      {routes.filter((item) => item.id !== "settings").map((item) => <RailButton key={item.id} item={item} active={route === item.id} disabled={disabled} onRoute={onRoute} />)}
      <span className="rail-spacer" aria-hidden="true" />
      {settingsRoute ? <RailButton item={settingsRoute} active={route === "settings"} disabled={disabled} onRoute={onRoute} /> : null}
    </aside>
  );
}

function RailButton({ item, active, disabled, onRoute }: { item: { id: RouteId; label: string; title: string }; active: boolean; disabled: boolean; onRoute(route: RouteId): void }): ReactElement {
  return <button className={`rail-button${active ? " active" : ""}`} type="button" data-route={item.id} title={item.title} aria-label={item.title} aria-current={active ? "page" : undefined} disabled={disabled} onClick={() => { if (!disabled) onRoute(item.id); }}>{item.label}</button>;
}
