import { defineWebComponent } from './define';
import { ChatScopePicker } from '../components/chat-scope-picker';
import type { SearchFilters } from '../types';

interface Props extends Record<string, unknown> {
  /** Authors to offer as scope filters. Set as a JS property. */
  availableAuthors: string[];
  /** Tags to offer as scope filters. Set as a JS property. */
  availableTags: string[];
  /** The label shown on the trigger for the active scope. */
  currentLabel?: string;
}

/** Events fired by `<kc-scope-picker>`. */
interface Events {
  /** A scope was chosen (`undefined` filters = "All Content"). */
  'kc-scope-change': { filters: SearchFilters | undefined };
}

/**
 * `<kc-scope-picker>` — a dropdown to scope a chat by author or tag.
 * Options via `available-authors`/`available-tags` properties; emits
 * `kc-scope-change`.
 */
defineWebComponent<Props, Events>('kc-scope-picker', {
  availableAuthors: [],
  availableTags: [],
  currentLabel: 'All Content',
}, (props, { dispatch }) => (
  <ChatScopePicker
    currentLabel={props.currentLabel ?? 'All Content'}
    availableAuthors={props.availableAuthors}
    availableTags={props.availableTags}
    onScopeChange={(filters) => dispatch('kc-scope-change', { filters })}
  />
));