Toggle Button

---
/**
 * APG Toggle Button Pattern - Astro Implementation
 *
 * A two-state button that can be either "pressed" or "not pressed".
 * Uses Web Components for client-side interactivity.
 *
 * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
 */

export interface Props {
  /** Initial pressed state */
  initialPressed?: boolean;
  /** Whether the button is disabled */
  disabled?: boolean;
  /** Additional CSS class */
  class?: string;
}

const { initialPressed = false, disabled = false, class: className = '' } = Astro.props;

const stateClass = initialPressed ? 'apg-toggle-button--pressed' : 'apg-toggle-button--not-pressed';

const indicatorClass = initialPressed
  ? 'apg-toggle-indicator--pressed'
  : 'apg-toggle-indicator--not-pressed';

// Check if custom indicator slots are provided
const hasPressedIndicator = Astro.slots.has('pressed-indicator');
const hasUnpressedIndicator = Astro.slots.has('unpressed-indicator');
const hasCustomIndicators = hasPressedIndicator || hasUnpressedIndicator;
---

<apg-toggle-button class={className}>
  <button
    type="button"
    class={`apg-toggle-button ${stateClass}`}
    aria-pressed={initialPressed}
    disabled={disabled}
  >
    <span class="apg-toggle-button-content">
      <slot />
    </span>
    <span
      class={`apg-toggle-indicator ${indicatorClass}`}
      aria-hidden="true"
      data-custom-indicators={hasCustomIndicators ? 'true' : undefined}
    >
      {
        hasCustomIndicators ? (
          <>
            <span class="apg-indicator-pressed" hidden={!initialPressed}>
              <slot name="pressed-indicator">●</slot>
            </span>
            <span class="apg-indicator-unpressed" hidden={initialPressed}>
              <slot name="unpressed-indicator">○</slot>
            </span>
          </>
        ) : initialPressed ? (
          '●'
        ) : (
          '○'
        )
      }
    </span>
  </button>
</apg-toggle-button>

<script>
  class ApgToggleButton extends HTMLElement {
    private button: HTMLButtonElement | null = null;
    private rafId: number | null = null;

    connectedCallback() {
      // Use requestAnimationFrame to ensure DOM is fully constructed
      this.rafId = requestAnimationFrame(() => this.initialize());
    }

    private initialize() {
      this.rafId = null;
      this.button = this.querySelector('button');
      if (!this.button) {
        console.warn('apg-toggle-button: button element not found');
        return;
      }

      this.button.addEventListener('click', this.handleClick);
    }

    disconnectedCallback() {
      // Cancel pending initialization
      if (this.rafId !== null) {
        cancelAnimationFrame(this.rafId);
        this.rafId = null;
      }
      // Remove event listeners
      this.button?.removeEventListener('click', this.handleClick);
      this.button = null;
    }

    private handleClick = () => {
      if (!this.button || this.button.disabled) return;

      const currentPressed = this.button.getAttribute('aria-pressed') === 'true';
      const newPressed = !currentPressed;

      // Update aria-pressed
      this.button.setAttribute('aria-pressed', String(newPressed));

      // Update CSS classes
      this.button.classList.toggle('apg-toggle-button--pressed', newPressed);
      this.button.classList.toggle('apg-toggle-button--not-pressed', !newPressed);

      // Update indicator
      const indicator = this.button.querySelector('.apg-toggle-indicator');
      if (indicator) {
        const hasCustomIndicators = indicator.getAttribute('data-custom-indicators') === 'true';

        if (hasCustomIndicators) {
          // Toggle visibility of custom indicator slots
          const pressedIndicator = indicator.querySelector('.apg-indicator-pressed');
          const unpressedIndicator = indicator.querySelector('.apg-indicator-unpressed');
          if (pressedIndicator instanceof HTMLElement) {
            pressedIndicator.hidden = !newPressed;
          }
          if (unpressedIndicator instanceof HTMLElement) {
            unpressedIndicator.hidden = newPressed;
          }
        } else {
          // Use default text indicators
          indicator.textContent = newPressed ? '●' : '○';
        }

        indicator.classList.toggle('apg-toggle-indicator--pressed', newPressed);
        indicator.classList.toggle('apg-toggle-indicator--not-pressed', !newPressed);
      }

      // Dispatch custom event for external listeners
      this.dispatchEvent(
        new CustomEvent('toggle', {
          detail: { pressed: newPressed },
          bubbles: true,
        })
      );
    };
  }

  // Register the custom element
  if (!customElements.get('apg-toggle-button')) {
    customElements.define('apg-toggle-button', ApgToggleButton);
  }
</script>

---
import ToggleButton from './ToggleButton.astro';
import Icon from './Icon.astro';
---

<ToggleButton>
  <Icon name="volume-off" slot="pressed-indicator" />
  <Icon name="volume-2" slot="unpressed-indicator" />
  Mute
</ToggleButton>

<script>
  // Listen for toggle events
  document.querySelector('apg-toggle-button')?.addEventListener('toggle', (e) => {
    console.log('Muted:', e.detail.pressed);
  });
</script>