import { __esDecorate, __runInitializers } from "tslib";
import { html, LitElement, nothing } from 'lit';
import { state, property } from 'lit/decorators.js';
import '../../md/icons/ui-icon.js';
import '../../md/button/ui-button.js';
import '../../md/button/ui-button-group.js';
import '../../md/icon-button/ui-icon-button.js';
import '../../md/divider/ui-divider.js';
import '../../md/text-field/ui-outlined-text-field.js';
import '../../md/progress/ui-circular-progress.js';
import '../../elements/data-table/data-catalog-table.js';
function isDataCatalogScope(value) {
    return ['public', 'private', 'organization'].includes(value);
}
function isDataCatalogLifecycle(value) {
    return ['stable', 'beta', 'dev'].includes(value);
}
let DataCatalogBrowser = (() => {
    let _classSuper = LitElement;
    let _directSelect_decorators;
    let _directSelect_initializers = [];
    let _directSelect_extraInitializers = [];
    let _items_decorators;
    let _items_initializers = [];
    let _items_extraInitializers = [];
    let _state_decorators;
    let _state_initializers = [];
    let _state_extraInitializers = [];
    let _errorTitle_decorators;
    let _errorTitle_initializers = [];
    let _errorTitle_extraInitializers = [];
    let _errorMessage_decorators;
    let _errorMessage_initializers = [];
    let _errorMessage_extraInitializers = [];
    let _scope_decorators;
    let _scope_initializers = [];
    let _scope_extraInitializers = [];
    let _lifecycle_decorators;
    let _lifecycle_initializers = [];
    let _lifecycle_extraInitializers = [];
    let _userQuery_decorators;
    let _userQuery_initializers = [];
    let _userQuery_extraInitializers = [];
    return class DataCatalogBrowser extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _directSelect_decorators = [property({ type: Boolean })];
            _items_decorators = [property({ type: Object })];
            _state_decorators = [property({ type: String })];
            _errorTitle_decorators = [property({ type: String })];
            _errorMessage_decorators = [property({ type: String })];
            _scope_decorators = [state()];
            _lifecycle_decorators = [state()];
            _userQuery_decorators = [state()];
            __esDecorate(this, null, _directSelect_decorators, { kind: "accessor", name: "directSelect", static: false, private: false, access: { has: obj => "directSelect" in obj, get: obj => obj.directSelect, set: (obj, value) => { obj.directSelect = value; } }, metadata: _metadata }, _directSelect_initializers, _directSelect_extraInitializers);
            __esDecorate(this, null, _items_decorators, { kind: "accessor", name: "items", static: false, private: false, access: { has: obj => "items" in obj, get: obj => obj.items, set: (obj, value) => { obj.items = value; } }, metadata: _metadata }, _items_initializers, _items_extraInitializers);
            __esDecorate(this, null, _state_decorators, { kind: "accessor", name: "state", static: false, private: false, access: { has: obj => "state" in obj, get: obj => obj.state, set: (obj, value) => { obj.state = value; } }, metadata: _metadata }, _state_initializers, _state_extraInitializers);
            __esDecorate(this, null, _errorTitle_decorators, { kind: "accessor", name: "errorTitle", static: false, private: false, access: { has: obj => "errorTitle" in obj, get: obj => obj.errorTitle, set: (obj, value) => { obj.errorTitle = value; } }, metadata: _metadata }, _errorTitle_initializers, _errorTitle_extraInitializers);
            __esDecorate(this, null, _errorMessage_decorators, { kind: "accessor", name: "errorMessage", static: false, private: false, access: { has: obj => "errorMessage" in obj, get: obj => obj.errorMessage, set: (obj, value) => { obj.errorMessage = value; } }, metadata: _metadata }, _errorMessage_initializers, _errorMessage_extraInitializers);
            __esDecorate(this, null, _scope_decorators, { kind: "accessor", name: "scope", static: false, private: false, access: { has: obj => "scope" in obj, get: obj => obj.scope, set: (obj, value) => { obj.scope = value; } }, metadata: _metadata }, _scope_initializers, _scope_extraInitializers);
            __esDecorate(this, null, _lifecycle_decorators, { kind: "accessor", name: "lifecycle", static: false, private: false, access: { has: obj => "lifecycle" in obj, get: obj => obj.lifecycle, set: (obj, value) => { obj.lifecycle = value; } }, metadata: _metadata }, _lifecycle_initializers, _lifecycle_extraInitializers);
            __esDecorate(this, null, _userQuery_decorators, { kind: "accessor", name: "userQuery", static: false, private: false, access: { has: obj => "userQuery" in obj, get: obj => obj.userQuery, set: (obj, value) => { obj.userQuery = value; } }, metadata: _metadata }, _userQuery_initializers, _userQuery_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #directSelect_accessor_storage = __runInitializers(this, _directSelect_initializers, void 0);
        /**
         * When set, the table will render additional column with a button to directly select the item.
         * @attribute
         */
        get directSelect() { return this.#directSelect_accessor_storage; }
        set directSelect(value) { this.#directSelect_accessor_storage = value; }
        #items_accessor_storage = (__runInitializers(this, _directSelect_extraInitializers), __runInitializers(this, _items_initializers, void 0));
        /**
         * The data to display in the table.
         * @attribute
         */
        get items() { return this.#items_accessor_storage; }
        set items(value) { this.#items_accessor_storage = value; }
        #state_accessor_storage = (__runInitializers(this, _items_extraInitializers), __runInitializers(this, _state_initializers, 'loading'
        /**
         * Required when in error state. Renders the title of the error message.
         * @attribute
         */
        ));
        /**
         * The current state of the browser. The controller managing the query service will set this property
         * depending on the query state.
         * @attribute
         */
        get state() { return this.#state_accessor_storage; }
        set state(value) { this.#state_accessor_storage = value; }
        #errorTitle_accessor_storage = (__runInitializers(this, _state_extraInitializers), __runInitializers(this, _errorTitle_initializers, void 0));
        /**
         * Required when in error state. Renders the title of the error message.
         * @attribute
         */
        get errorTitle() { return this.#errorTitle_accessor_storage; }
        set errorTitle(value) { this.#errorTitle_accessor_storage = value; }
        #errorMessage_accessor_storage = (__runInitializers(this, _errorTitle_extraInitializers), __runInitializers(this, _errorMessage_initializers, void 0));
        /**
         * Required when in error state. Renders the description of the error message.
         * @attribute
         */
        get errorMessage() { return this.#errorMessage_accessor_storage; }
        set errorMessage(value) { this.#errorMessage_accessor_storage = value; }
        #selection = __runInitializers(this, _errorMessage_extraInitializers);
        /**
         * The currently selected item in the table, if any.
         * @readonly
         */
        get selection() {
            return this.#selection ? { ...this.#selection } : undefined;
        }
        #scope_accessor_storage = __runInitializers(this, _scope_initializers, void 0);
        /**
         * The current scope of the data catalog query.
         */
        get scope() { return this.#scope_accessor_storage; }
        set scope(value) { this.#scope_accessor_storage = value; }
        #lifecycle_accessor_storage = (__runInitializers(this, _scope_extraInitializers), __runInitializers(this, _lifecycle_initializers, void 0));
        /**
         * The current lifecycle of the data catalog query.
         */
        get lifecycle() { return this.#lifecycle_accessor_storage; }
        set lifecycle(value) { this.#lifecycle_accessor_storage = value; }
        #userQuery_accessor_storage = (__runInitializers(this, _lifecycle_extraInitializers), __runInitializers(this, _userQuery_initializers, void 0));
        /**
         * The current query string.
         */
        get userQuery() { return this.#userQuery_accessor_storage; }
        set userQuery(value) { this.#userQuery_accessor_storage = value; }
        /**
         * Dispatches the `query` event with the current filters.
         * The parent application needs to track state of the query. If the `query` event
         * has the `query` property set to `undefined` it means the search should be reset.
         */
        query() {
            this.dispatchEvent(new CustomEvent('query', {
                detail: this.getFilters(),
            }));
        }
        /**
         * Returns the map of current filters.
         */
        getFilters() {
            const result = {};
            if (this.userQuery) {
                result.query = this.userQuery;
            }
            if (this.scope) {
                result.scope = this.scope;
            }
            if (this.lifecycle) {
                result.lifecycle = this.lifecycle;
            }
            return result;
        }
        handleSearchKeydown(e) {
            const input = e.currentTarget;
            const value = input.value.trim();
            if (e.key === 'Enter' && value) {
                this.userQuery = value;
                this.query();
            }
            else if (e.key === 'Escape') {
                e.preventDefault();
                e.stopPropagation();
                input.value = '';
                this.userQuery = undefined;
                this.query();
            }
        }
        handleFilterClick(e) {
            const target = e.target;
            const field = target.dataset.field;
            const value = target.dataset.value;
            if (!field || !value) {
                return;
            }
            if (field === 'scope' && isDataCatalogScope(value)) {
                if (this.scope === value) {
                    this.scope = 'public'; // Reset to default if the same value is clicked
                }
                else {
                    this.scope = value;
                }
            }
            else if (field === 'lifecycle' && isDataCatalogLifecycle(value)) {
                if (this.lifecycle === value) {
                    this.lifecycle = 'stable'; // Reset to default if the same value is clicked
                }
                else {
                    this.lifecycle = value;
                }
            }
            this.query();
        }
        handleTableSelect(e) {
            const { item, version } = e.detail;
            if (!item || !version) {
                this.#selection = undefined;
            }
            else {
                this.#selection = { item, version };
            }
            this.dispatchEvent(new CustomEvent('select', { detail: this.selection }));
        }
        render() {
            const { state } = this;
            if (state === 'loading') {
                return this.#renderLoader();
            }
            if (state === 'error') {
                return this.#renderError();
            }
            return this.#renderBody();
        }
        #renderLoader() {
            return html `
      <div class="browse-dialog centered" part="loader">
        <ui-circular-progress indeterminate></ui-circular-progress>
        <p>One second...</p>
      </div>
    `;
        }
        #renderError() {
            return html `
      <div class="browse-dialog centered error" part="error">
        <h2 class="title-large">${this.errorTitle}</h2>
        <p class="body-large">${this.errorMessage}</p>
        <ui-button @click="${this.query}">Retry</ui-button>
      </div>
    `;
        }
        #renderBody() {
            return html `<div class="controls" part="controls">${this.#renderSearchInput()} ${this.#renderFilters()}</div>
      <data-catalog-table
        ?directSelect="${this.directSelect}"
        .items="${this.items}"
        @select="${this.handleTableSelect}"
        @scrollend="${this.query}"
        class="results"
        part="results"
      ></data-catalog-table>`;
        }
        #renderSearchInput() {
            return html `
      <ui-outlined-text-field
        id="domain-search"
        label="Search"
        type="search"
        class="search"
        part="search"
        .value="${this.userQuery ?? ''}"
        @keydown="${this.handleSearchKeydown}"
      ></ui-outlined-text-field>
    `;
        }
        #renderFilters() {
            const isPublic = this.scope === 'public';
            const isOrganization = this.scope === 'organization';
            const isPrivate = this.scope === 'private';
            const isStable = this.lifecycle === 'stable';
            const isBeta = this.lifecycle === 'beta';
            const isDev = this.lifecycle === 'dev';
            return html `<div class="filters" @click="${this.handleFilterClick}" part="filters">
      <ui-button-group type="connected">
        <ui-button color="tonal" size="xs" toggle data-field="scope" data-value="public" ?selected="${isPublic}"
          >${isPublic ? html `<ui-icon slot="icon">check</ui-icon>` : nothing}Public</ui-button
        >
        <ui-button
          color="tonal"
          size="xs"
          toggle
          data-field="scope"
          data-value="organization"
          ?selected="${isOrganization}"
          >${isOrganization ? html `<ui-icon slot="icon">check</ui-icon>` : nothing}Organization</ui-button
        >
        <ui-button color="tonal" size="xs" toggle data-field="scope" data-value="private" ?selected="${isPrivate}"
          >${isPrivate ? html `<ui-icon slot="icon">check</ui-icon>` : nothing}Private</ui-button
        >
      </ui-button-group>
      <ui-button-group type="connected">
        <ui-button color="tonal" size="xs" toggle data-field="lifecycle" data-value="stable" ?selected="${isStable}"
          >${isStable ? html `<ui-icon slot="icon">check</ui-icon>` : nothing}Stable</ui-button
        >
        <ui-button color="tonal" size="xs" toggle data-field="lifecycle" data-value="beta" ?selected="${isBeta}"
          >${isBeta ? html `<ui-icon slot="icon">check</ui-icon>` : nothing}Beta</ui-button
        >
        <ui-button color="tonal" size="xs" toggle data-field="lifecycle" data-value="dev" ?selected="${isDev}"
          >${isDev ? html `<ui-icon slot="icon">check</ui-icon>` : nothing}Dev</ui-button
        >
      </ui-button-group>
    </div>`;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _userQuery_extraInitializers);
        }
    };
})();
/**
 * A browser for the data catalog.
 *
 * This element allows the user to browse the data catalog, filter by scope and lifecycle, and search by text.
 * It renders a table with the results and pagination support.
 *
 * @fires CustomEvent<DataCatalogQueryEventDetail> query - Dispatched when the user searches or changes filters.
 * @fires CustomEvent<DataCatalogTableSelectionDetail> select - Dispatched when the selection in the table changes.
 *
 * @csspart loader - The container for the loader.
 * @csspart error - The container for the error message.
 * @csspart controls - The container for the search and filters.
 * @csspart results - The data table element.
 * @csspart search - The search input field.
 * @csspart filters - The container for the filters.
 */
export default DataCatalogBrowser;
//# sourceMappingURL=DataCatalogBrowser.js.map