import { customElement } from 'lit/decorators.js'
import Element from './internals/OrganizationSelector.js'
import styles from './internals/OrganizationSelector.styles.js'
import typography from '../../styles/m3/typography.module.js'

import '../../md/button/ui-button.js'
import '../../md/icons/ui-icon.js'
import '../../md/menu/ui-menu.js'
import '../../md/menu/ui-menu-item.js'
import '../../md/divider/ui-divider.js'

/**
 * An element that allows selecting an organization from a list.
 * It renders a button with the current organization name that triggers a dropdown menu with available organizations.
 *
 * The component supports creating a new organization via a dedicated menu item.
 *
 * @example
 * ```html
 * <organization-selector
 *   .organization="${this.selectedOrg}"
 *   .organizations="${this.availableOrgs}"
 *   @select="${this.handleSelection}"
 *   @create="${this.handleCreate}"
 * ></organization-selector>
 * ```
 * @element organization-selector
 */
@customElement('organization-selector')
export class OrganizationSelectorElement extends Element {
  static override styles = [typography, styles]
}

declare global {
  interface HTMLElementTagNameMap {
    'organization-selector': OrganizationSelectorElement
  }
}
