import { forwardRef } from "react";

/**
 * Menu
 *
 * size:        "sm" | (default)
 * search:      boolean - renders a search input above the item list
 * searchProps: object - forwarded to the search <input> (value, onChange, placeholder, etc.)
 * items:       MenuItem[]
 *
 * MenuItem shape:
 *   label:     string | ReactNode
 *   type:      "button" | "checkbox" (default: "button")
 *   icon:      ReactNode - leading icon; add aria-hidden="true" if decorative
 *   selected:  boolean - shows check icon (button) or checked state (checkbox)
 *   disabled:  boolean
 *   onClick:   function - button items
 *   onChange:  function - checkbox items
 *   itemProps: object - forwarded to the <button> or <label>
 */
const Menu = forwardRef(function Menu(
  {
    size,
    search = false,
    searchProps = {},
    items = [],
    className = "",
    ...props
  },
  ref
) {
  const classes = [
    "prs-menu",
    size === "sm" && "prs-menu-sm",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div ref={ref} className={classes} {...props}>

      {search && (
        <label className="prs-menu-search">
          <input
            type="search"
            className="prs-input"
            aria-label={searchProps["aria-label"] ?? "Search"}
            {...searchProps}
          />
        </label>
      )}

      <menu>
        {items.map((item, index) => (
          <li key={index}>
            {item.type === "checkbox" ? (
              <CheckboxItem item={item} />
            ) : (
              <ButtonItem item={item} />
            )}
          </li>
        ))}
      </menu>

    </div>
  );
});

export default Menu;

// ---------------------------------------------------------------------------
// Internal item renderers
// ---------------------------------------------------------------------------

function ButtonItem({ item }) {
  const { label, icon, selected, disabled, onClick, itemProps = {} } = item;

  return (
    <button
      type="button"
      className="prs-menu-item"
      disabled={disabled}
      onClick={onClick}
      {...itemProps}
    >
      {icon && (
        <span className="prs-menu-icon">{icon}</span>
      )}
      <span className="prs-menu-item-label">{label}</span>
      {selected && (
        <span className="prs-menu-icon" aria-label="Selected">
          <CheckIcon />
        </span>
      )}
    </button>
  );
}

function CheckboxItem({ item }) {
  const { label, selected, disabled, onChange, itemProps = {} } = item;

  return (
    <label className="prs-menu-item" {...itemProps}>
      <input
        type="checkbox"
        className="prs-checkbox"
        checked={selected ?? false}
        disabled={disabled}
        onChange={onChange}
      />
      <span className="prs-menu-item-label">{label}</span>
    </label>
  );
}

// Internal check icon - always decorative (aria-label is on the wrapper span)
const CheckIcon = () => (
  <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18" aria-hidden="true">
    <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clipRule="evenodd" />
  </svg>
);