/**
 * Styles deck — counterpart of sfx2/source/dialog/StyleList.cxx (the style
 * list shared by the Styles sidebar deck and the old Stylist). Paragraph
 * styles only for now; applying dispatches .uno:StyleApply like upstream.
 */
import type { CSSProperties } from "react";
import { useDispatcher } from "../control/dispatch";
import { useViewFrame } from "../view/viewfrm";

export interface SfxStyleListEntry {
  uiName: string;
  preview?: CSSProperties;
}

export function StyleList() {
  const dispatcher = useDispatcher();
  const frame = useViewFrame();
  const state = dispatcher.queryState(".uno:StyleApply");
  const value = state.value as { current: string; styles: SfxStyleListEntry[] } | undefined;
  return (
    <div className="sfx-stylelist">
      <div className="sfx-stylelist-family">Paragraph Styles</div>
      <ul role="listbox" aria-label="Paragraph Styles">
        {(value?.styles ?? []).map((s) => (
          <li
            key={s.uiName}
            role="option"
            aria-selected={s.uiName === value?.current}
            onMouseDown={(e) => e.preventDefault()}
            onClick={() => {
              dispatcher.execute(".uno:StyleApply", { Style: s.uiName, FamilyName: "ParagraphStyles" });
              frame.grabFocus();
            }}
          >
            <span style={s.preview}>{s.uiName}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}