// <div data-showing="one">, click-through carousel over a described gallery.
//
// The widget tier's browser half, and it is smaller than it was. The server no
// longer renders a carousel and no longer renders its chrome either: it renders
// an ordered set of pictures that says one of them is showing, and quasi-webview
// derives prev/position/next from that fact alone. So this file stopped
// injecting buttons and stopped building a dot strip. What is left is the one
// thing a description cannot carry: which frame the reader has moved to since
// the page arrived.
//
// NOTHING HERE KNOWS WHAT A CAROUSEL IS. The hook is `data-showing`, not
// `data-widget="carousel"`, and that is deliberate: a script that matched on the
// widget's name would have to be written again for the next assembly showing one
// child at a time. This binds every one of them, including ones that do not
// exist yet.
//
// PROGRESSIVE ENHANCEMENT. The controls are on the page but makeover keeps
// `.showing` hidden until `data-ready` is set, so a reader with no script is
// never offered a button that does nothing. `no-js.css`, loaded from a
// <noscript> in the partial, opens the frame stack out for them instead.

import { MnwElement, define } from './base.ts';
import { bindShowing } from '../core/showing.ts';

class Carousel extends MnwElement {
  protected init(): void {
    // The element wraps the described region rather than being it. A custom
    // element is what gets upgraded automatically on an htmx swap, which is the
    // whole reason islands are custom elements; the description emits a plain
    // `<div>` because it has no idea this host prefixes its tags with `mnw-`.
    // So the template puts one around the other and each half stays honest.
    const region = this.querySelector<HTMLElement>('[data-showing]');
    if (!region) return;

    // Moving between frames is shared with every other region that shows one
    // child at a time, `core/showing.ts`: a gallery and a tab strip are the
    // same fact to the renderer, so they were the same loop written twice here
    // until the library strip needed the second copy.
    const showing = bindShowing(region);
    if (!showing) return; // nothing to navigate; leave the stack alone

    // The group semantics the template used to carry. They belong with the
    // behaviour: a stack of pictures is not a carousel until this runs, and
    // announcing one before then describes something the reader cannot use.
    region.setAttribute('role', 'group');
    region.setAttribute('aria-roledescription', 'carousel');
    region.setAttribute('aria-label', 'Screenshots');
    region.tabIndex = 0;

    const frames = region.querySelectorAll<HTMLElement>(':scope > .showing-frame');
    frames.forEach((f, i) => {
      f.setAttribute('role', 'group');
      f.setAttribute('aria-roledescription', 'slide');
      f.setAttribute('aria-label', `${i + 1} of ${showing.count()}`);
    });

    showing.show(showing.at());
    region.setAttribute('data-ready', ''); // reveals the row, collapses the stack
  }
}

define('mnw-carousel', Carousel);