import { WebComponent, choice, string, type PropChange } from '../src/index.ts';
import { THEMES } from './themes.ts';
import { register } from './main-context.ts';
import css from './hero-banner.css' with { type: 'css' };

/**
 * Declarative shadow DOM: the shadow root and its layout `<style>` are written
 * in index.html inside `<template shadowrootmode="open">`, so the banner paints
 * before any script runs. The mixin finds that root and uses it (no `shadow` or
 * `template` here), and still adopts `css` into it for the animated effects.
 */
const SPEC = {
  css,
  element: {
    headlineText: 'h1',
    taglineText: 'p.tagline',
  },
  props: {
    headline: string(),
    tagline: string(),
    theme: choice(THEMES, { default: 'sunset' }),
  },
} as const;

export class HeroBanner extends WebComponent(SPEC) {
  override onConnect(): void {
    register(this, {
      onHeadline: (headline) => {
        this.headline = headline;
      },
      onTagline: (tagline) => {
        this.tagline = tagline;
      },
      onTheme: (theme) => {
        this.theme = theme;
      },
    });
  }

  override onPropChange(change: PropChange<typeof SPEC>): void {
    switch (change.name) {
      case 'headline': {
        if (this.refs.headlineText) this.refs.headlineText.textContent = change.value ?? '';
        break;
      }
      case 'tagline': {
        const el = this.refs.taglineText;
        if (!el) break;
        el.textContent = change.value ?? '';
        // Restart the entrance animation so each edit visibly lands.
        for (const animation of el.getAnimations()) {
          animation.cancel();
          animation.play();
        }
        break;
      }
      case 'theme': {
        // `:host([theme])` does the work; the attribute is already reflected.
        break;
      }
    }
  }
}

customElements.define('hero-banner', HeroBanner);

declare global {
  interface HTMLElementTagNameMap {
    'hero-banner': HeroBanner;
  }
}