import { TemplateResult, PropertyValues, nothing } from 'lit';
import { ApiDefinitions } from '@api-client/core/build/browser.js';
import ApiElement from "../ApiElement.js";
import { SelectionType, ServerType } from '../../amf/types.js';
import { UiDropdownListSelection } from '../../ui/list/UiDropdownList.js';
import Input from '../../ui/input/Input.js';
import '../../define/ui/ui-icon.js';
import '../../define/ui/ui-dropdown-list.js';
import '../../define/ui/ui-list.js';
import '../../define/ui/ui-list-item.js';
import '../../define/ui/ui-text-field.js';
import '../../define/ui/ui-icon-button.js';
interface ICustomServer {
    index: number;
    value: string;
}
interface IAutoSelectOptions {
    /**
     * The preferred URI value to use to select.
     */
    preferred?: string;
    /**
     * When set to `true` it only allows to select the value from API servers or custom servers.
     * It won't select the value as a `custom` value.
     */
    noCustom?: boolean;
}
/**
 * An element that presents a list of servers defined in the currently loaded API.
 * The user can select a server they prefer to use with the rest of the API documentation UI.
 *
 * The element dispatched the `apiserverchanged` event when the selection is made. This event
 * is dispatched when the selection is made automatically after querying for server data or when
 * the user decide to select a different option.
 *
 * ```javascript
 * const template = html`<api-server-picker @apiserverchanged="${this._serverChanged}"></api-server-picker>`;
 * ```
 *
 * The event is dispatched with the `detail` object that has the `value` with the current base URI of the selected server,
 * optional `id` with the graph ID of the selected server, and the type of the current selection.
 * The `type` property is one of: `server` (pick is one of the predefined servers), `custom` (user entered value), or `extra`
 * (one of the added server definitions from the outside of the API specification.)
 *
 * The picker allows the user to enter a custom value of the base URI when the `custom` property is set. In this case, the user can
 * select the "custom" value in the drop-down options list which then renders an input field where the user can change the value.
 * The `apiserverchanged` event is dispatched after the user commit the change in the input field (enter, blur).
 *
 * Additionally, the element offers a named `<slot>` (custom-base-uri) which renders all passed items in the dropdown. All items that
 * have `data-value` attribute set are selectable as the server value.
 *
 * ```javascript
 * const template = html`
 * <api-server-picker @apiserverchanged="${this._serverChanged}">
 *  <ui-list-item slot="custom-base-uri" data-value="http://mocking.com">Mocking service</ui-list-item>
 * </api-server-picker>`;
 * ```
 *
 * By default all server items are rendered as `<ui-list-item>`. However, you can pass any element to make the experience
 * more compelling to the user (like adding a section header).
 *
 * @fires apiserverchanged - The event dispatched when a server selection change.
 * @fires serverscountchanged - The event dispatched when a server count change.
 * @fires query - Dispatched when the element asks the context store for servers info.
 */
export default class ApiServerPicker extends ApiElement {
    /**
     * Currently selected type of the input.
     * `server` | `extra` | `custom`
     * @attribute
     */
    type?: ServerType;
    protected _graphLoaded: boolean;
    /**
     * When set it automatically selected the first server from the list of servers when selection is missing.
     * @attribute
     */
    auto?: boolean;
    /**
     * When set the `Custom base URI` is rendered in the dropdown
     * @attribute
     */
    custom?: boolean;
    /**
     * A programmatic access to the opened state of the drop down.
     * Note, this does nothing when custom element is rendered.
     * @attribute
     */
    opened?: boolean;
    /**
     * The graph domain id of the selected domain object.
     * @attribute
     */
    domainId?: string | undefined;
    /**
     * The selected domain type.
     * This is an abstract name from the api navigation.
     * @attribute
     */
    domainType?: SelectionType;
    /**
     * The timeout after which the `queryGraph()` function is called
     * in the debouncer.
     * @attribute
     */
    queryDebouncerTimeout: number;
    /**
     * The current base URI value from either (in order) the baseUri, current value, or just empty string.
     * @attribute
     */
    value?: string;
    /**
     * The `baseUri` property overrides any server definition and turns the picker into the
     * "custom" mode.
     * @attribute
     */
    baseUri?: string;
    protected _debounceValue?: number;
    /**
     * Holds the size of rendered custom servers.
     */
    protected _customNodesCount: number;
    /**
     * A list of custom items rendered in the slot.
     */
    protected _customItems: ICustomServer[];
    protected _servers?: ApiDefinitions.IApiServer[];
    /**
     * Returns a list of custom servers found in the element's DOM.
     * For an item to be included in the list it has to have the `data-value="..."` attribute set.
     */
    get customServers(): string[];
    /**
     * Returns a list of servers defined in the API.
     */
    get apiServers(): string[];
    /**
     * @returns Total number of list items being rendered.
     */
    get serversCount(): number;
    protected _onApiServerChange: EventListener | null;
    /**
     * @returns Previously registered callback function for the `api-server-changed` event.
     */
    get onapiserverchange(): EventListener | null;
    /**
     * @param value A callback function to be called  when `api-server-changed` event is dispatched.
     */
    set onapiserverchange(value: EventListener | null);
    protected _onServersCountChangeValue: EventListener | null;
    /**
     * @returns Previously registered callback function for the `servers-count-changed` event.
     */
    get onserverscountchange(): EventListener | null;
    /**
     * @param value A callback function to be called when `servers-count-changed` event is dispatched.
     */
    set onserverscountchange(value: EventListener | null);
    protected _boundEvent: () => void;
    protected customInput?: Input | null;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected shouldUpdate(_changedProperties: PropertyValues<this>): boolean;
    protected updated(_changedProperties: PropertyValues<this>): void;
    /**
     * Calls the `queryGraph()` function in a debouncer.
     */
    protected _processDebounce(): void;
    /**
     * Queries for the current API server data from the store.
     */
    processGraph(): Promise<void>;
    /**
     * Queries for the current servers value.
     */
    protected _queryServers(): Promise<void>;
    /**
     * Checks whether the passed value would be rendered as a "custom" value.
     * The value is "custom" if it cannot be matched with server value for an API defined server or
     * a custom server passed in the DOM.
     *
     * @param value The value to test.
     * @returns `true` when the value would be rendered as "custom".
     */
    isValueCustom(value?: string): boolean;
    /**
     * This only makes sure whether the set value is a "custom" value while no selection is made.
     *
     * @param value The current value.
     */
    protected _valueChanged(value?: string): void;
    /**
     * Automatically selects one of available values.
     *
     * When the `preferred` is set it checks whether this value is on the servers list. If so this value is used.
     * If none match then it checks for custom servers and if they have this value then it is set.
     *
     * Otherwise it takes files value of servers or custom servers (when no servers) and sets this value instead.
     *
     * Caveats:
     * - it does nothing when `auto` is not set
     * - it does nothing when `type` is `custom`
     * - it won't set the "first" server or custom server value when the graph is being loaded.
     *
     * @param preferred The preferred value to be selected.
     */
    protected _autoSelect({ preferred, noCustom }?: IAutoSelectOptions): void;
    protected handleDropdownOpen(e: Event): void;
    protected handleSelection(e: CustomEvent<UiDropdownListSelection>): void;
    protected handleSlot(e: Event): void;
    /**
     * Dispatches the `servers-count-changed` event with the current number of rendered servers.
     */
    protected notifyServersCount(): void;
    protected handleCustomChange(e: Event): void;
    /**
     * Resets current selection to a default value.
     */
    protected disabledCustomUri(): void;
    protected enableCustomUri(): Promise<void>;
    /**
     * Removes the currently rendered servers from the element.
     * This allow to programmatically manipulate the list of servers by removing all API related definitions.
     */
    removeServers(): void;
    render(): TemplateResult;
    /**
     * @returns Template result for the custom input.
     */
    protected renderCustomUriInput(): TemplateResult;
    /**
     * @returns Template result for the drop down element.
     */
    protected renderSelector(hidden: boolean): TemplateResult;
    /**
     * Call the render functions for
     * - Server options (from AMF Model)
     * - Custom URI option
     * - Extra slot
     * @returns The combination of all options
     */
    protected renderSelectorList(): TemplateResult;
    /**
     * @returns The template for the custom URI list item.
     */
    protected renderCustomUri(): TemplateResult | typeof nothing;
    /**
     * @returns Template result for the drop down list options for current servers
     */
    protected renderServerList(): TemplateResult[] | typeof nothing;
    /**
     * @param server The server definition
     * @returns The template for a server list item.
     */
    protected renderServerListItem(server: ApiDefinitions.IApiServer): TemplateResult;
    protected renderSlot(): TemplateResult;
}
export {};
//# sourceMappingURL=ApiServerPicker.element.d.ts.map