import { customElement } from 'lit/decorators.js'
import ApiModelingSessionScreen from './internals/ApiModelingSessionScreen.js'
import common from './internals/styles/api.styles.js'
import form from './internals/styles/form_styles.js'
import typography from '../styles/m3/typography.module.js'

// Required UI elements used by the screen
import '../md/select/ui-select.js'
import '../md/select/ui-option.js'
import '../md/divider/ui-divider.js'
import '../md/icons/ui-icon.js'
import '../md/text-field/ui-outlined-text-field.js'
import '../md/switch/ui-switch.js'
import '../md/checkbox/ui-checkbox.js'
import '../md/button/ui-button.js'
import '../md/menu/ui-menu.js'
import '../md/menu/ui-menu-item.js'
import '../md/list/ui-list.js'
import '../md/list/ui-list-item.js'
import '../md/icon-button/ui-icon-button.js'

/**
 * A component that renders the API Session section screen in the API modeling tool.
 * It allows to:
 * - Select the User entity.
 * - Add session properties from the User entities that are available during the request lifecycle.
 * - Generate session tokens and configure their settings.
 * - Select session transport method.
 */
@customElement('api-modeling-session')
export class ApiModelingSessionElement extends ApiModelingSessionScreen {
  static override styles = [form, typography, common]
}

declare global {
  interface HTMLElementTagNameMap {
    'api-modeling-session': ApiModelingSessionElement
  }
}
