import { render_slot_items } from '../templating/RsvSlotItems.js';

class RsvReservationSummary extends HTMLElement {

  // ---- Lifecycle ----------------------------------------------------------

  connectedCallback() {
    this._all_slots = new Map(); // name → { slots, price_per_block }
    this._form      = this.closest('form');
    this._build();

    if (this._form) {
      this._handler = e => {
        this._all_slots.set(e.detail.name, {
          slots:           e.detail.slots,
          price_per_block: e.detail.price_per_block,
        });
        this._render();
      };
      this._form.addEventListener('rsv:slots-changed', this._handler);
    }
  }

  disconnectedCallback() {
    if (this._form && this._handler) {
      this._form.removeEventListener('rsv:slots-changed', this._handler);
    }
  }

  // ---- Private ------------------------------------------------------------

  _build() {
    const s = ReservairStrings.summary;
    this.innerHTML = `
      <div class="rsv-summary-header">
        <span class="rsv-summary-title">${s.title}</span>
        <button type="button" class="rsv-summary-clear">${s.clear_all}</button>
      </div>
      <ul class="rsv-summary-list"></ul>
      <div class="rsv-summary-footer">
        <span class="rsv-summary-count"></span>
        <div class="rsv-summary-price"></div>
      </div>
    `;
    this.hidden = true;

    this.querySelector('.rsv-summary-clear').addEventListener('click', () => {
      this._form?.querySelectorAll('rsv-reservation-selector').forEach(sel => sel.clear());
    });
  }

  _render() {
    const all_slots = [...this._all_slots.values()].flatMap(({ slots, price_per_block }) =>
      slots.map(s => ({ ...s, price: price_per_block }))
    );

    const n        = all_slots.length;
    const list     = this.querySelector('.rsv-summary-list');
    const count_el = this.querySelector('.rsv-summary-count');
    const price_el = this.querySelector('.rsv-summary-price');
    const s        = ReservairStrings.summary;
    const locale   = navigator.language;

    this.hidden = n === 0;
    if (n === 0) {
      list.replaceChildren();
      count_el.textContent = '';
      price_el.textContent = '';
      return;
    }

    list.replaceChildren(...render_slot_items(all_slots, locale, s.currency));

    const total = all_slots.reduce((sum, slot) => sum + slot.price, 0);
    count_el.textContent = this._fmt_count(n);
    price_el.textContent = total > 0 ? `${total} ${s.currency}` : '';
  }

  _fmt_count(n) {
    const s = ReservairStrings.summary;
    if (n === 1) return s.count_one;
    if (n < 5)   return s.count_few.replace('%d', n);
    return s.count_many.replace('%d', n);
  }
}

customElements.define('rsv-reservation-summary', RsvReservationSummary);