import { ZuiBaseElement } from '@zywave/zui-base';
import { html } from 'lit';
import { style } from './zui-picker-css.js';
import '@zywave/zui-pager';
import '@zywave/zui-search';

/**
 * `<zui-picker>` is the wrapper around `<zui-picker-item>`'s, it renders slots for many of picker's features such as search, pagination, count and other controls.
 *
 * @element zui-picker
 *
 * @slot search - Slot in a search, such as `<zui-search>`
 * @slot results-count - Slot for total available results count
 * @slot picker-items - Slot for where all available `<zui-multipicker-item>`'s go, make a container such as `<div` `slot="picker-items">` then place `<zui-multipicker-item>`'s within
 * @slot pager - Slot for pagination
 *
 * @cssprop [--zui-picker-item-font-size=inherit] - If necessary, this property exists for font size control, by default it should `inherit` successfully
 *
 * @event {CustomEvent} change - Event is fired when a selection is made, details contain the event to tell where it originated from
 */
export class ZuiPicker extends ZuiBaseElement {
  firstUpdated() {
    this.addEventListener('selected', (e: CustomEvent) => {
      this.dispatchEvent(new CustomEvent('change', { detail: e.detail, bubbles: true }));
      e.stopPropagation();
    });

    this.shadowRoot.getElementById('search').addEventListener('change', (e) => e.stopPropagation());
  }

  static get styles() {
    return [super.styles, style];
  }

  render() {
    return html`
      <section>
        <slot id="search" name="search"></slot> <div class="results"><slot name="results-count"></slot></div>
        <div class="item-container"> <slot name="picker-items"></slot> </div> <slot name="pager"></slot>
      </section>
    `;
  }
}

window.customElements.define('zui-picker', ZuiPicker);

declare global {
  interface HTMLElementTagNameMap {
    'zui-picker': ZuiPicker;
  }
}