import { Menu as TMenu } from "tdesign-react";
import type { MenuValue } from "tdesign-react";
import { APP_ROUTES, routePath, type RouteId } from "../router";

export interface AppMenuProps {
  activeId: RouteId;
  collapsed?: boolean;
  onChange: (id: RouteId) => void;
  className?: string;
  showLogo?: boolean;
  width?: [string, string];
}

const { MenuItem } = TMenu;

export default function AppMenu({ activeId, collapsed = false, onChange, className, showLogo = true, width = ["232px", "64px"] }: AppMenuProps) {
  const handleChange = (value: MenuValue) => {
    if (typeof value === "string") onChange(value as RouteId);
  };

  return (
    <TMenu
      className={className}
      value={activeId}
      collapsed={collapsed}
      width={width}
      theme="light"
      logo={showLogo ? <MenuLogo collapsed={collapsed} /> : undefined}
      onChange={handleChange}
    >
      {APP_ROUTES.map(({ id, title, icon: Icon }) => (
        <MenuItem key={id} value={id} href={routePath(id)} onClick={({ e }) => e.preventDefault()} icon={<Icon className="t-icon tn-menu-icon" size={18} strokeWidth={1.8} />}>
          {title}
        </MenuItem>
      ))}
    </TMenu>
  );
}

function MenuLogo({ collapsed }: { collapsed: boolean }) {
  return (
    <div className="tn-menu-logo" aria-label="TallyNote">
      <span className={collapsed ? "tn-logo-short" : "tn-logo-full"}>{collapsed ? "TN" : "TallyNote"}</span>
    </div>
  );
}