"use client";

import { forwardRef } from "react";
import { FileText, Layers, Presentation } from "lucide-react";
import { READER_VIEWS, type ReaderView } from "../../../lib/report/slides";

// THE VIEW SWITCH — Article | Slides | Overview, a segmented control: one
// group of toggle buttons, the one in force pressed. The view is the URL's
// (`?rv=`); the caller says what pressing one does. Styles: slides.css
// `.rs-switch`, so the export site and umtool draw the same control.

const VIEWS: Readonly<Record<ReaderView, { label: string; Icon: typeof FileText }>> = {
  article: { label: "Article", Icon: FileText },
  slides: { label: "Slides", Icon: Presentation },
  iso: { label: "Overview", Icon: Layers },
};

export const ViewSwitch = forwardRef<
  HTMLDivElement,
  {
    value: ReaderView;
    onChange: (view: ReaderView) => void;
    // The views offered, in READER_VIEWS order (default all).
    views?: readonly ReaderView[];
    className?: string;
  }
>(function ViewSwitch({ value, onChange, views = READER_VIEWS, className }, ref) {
  return (
    <div
      ref={ref}
      role="group"
      aria-label="Read as"
      data-view-switch={value}
      className={`rs-root rs-switch${className ? ` ${className}` : ""}`}
    >
      {READER_VIEWS.filter((v) => views.includes(v)).map((view) => {
        const { label, Icon } = VIEWS[view];
        return (
          <button
            key={view}
            type="button"
            aria-pressed={value === view}
            data-view={view}
            onClick={() => {
              if (view !== value) onChange(view);
            }}
          >
            <Icon aria-hidden="true" />
            {label}
          </button>
        );
      })}
    </div>
  );
});