import { useFileTreeTab } from '../context/FileTreeTabContext';
import { useSettings } from '../context/SettingsContext';

/**
 * The little text buttons that sit to the right of a panel's title. Kept out
 * of Panel.jsx (which imports every panel component, and through RepoPanel
 * the whole Tauri platform bridge) so they can be unit-tested on their own.
 */
export function RepoHeaderMenus() {
  const { requestListChanges, hasPendingChanges } = useFileTreeTab();
  const { listChangesHint } = useSettings();
  // Shimmer only when there is actually something to review, and only if the
  // user has left the hint on (Settings ▸ Appearance ▸ List changes hint).
  const shimmer = hasPendingChanges && listChangesHint;

  return (
    <div className="panel-header-menus">
      <button
        type="button"
        className="panel-header-menu panel-header-menu--changes"
        onClick={requestListChanges}
      >
        List Changes
        {shimmer && (
          // An overlay copy of the label, not a filter on the real one: the
          // shimmer needs background-clip:text + color:transparent, which on
          // the button itself would permanently defeat its :hover colour.
          <span className="panel-header-shimmer" aria-hidden="true">
            List Changes
          </span>
        )}
      </button>
      {/* "Mirror Server" lived here as an inert label. Hidden until the
          feature exists. */}
    </div>
  );
}

export function HistoryHeaderMenus() {
  const { historyView, setHistoryView } = useFileTreeTab();
  const inGraph = historyView === 'graph';
  return (
    <div className="panel-header-menus">
      <button
        type="button"
        className="panel-header-menu"
        onClick={() => setHistoryView(inGraph ? 'list' : 'graph')}
      >
        {inGraph ? 'List View' : 'Graph View'}
      </button>
    </div>
  );
}
