import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { DataTable } from '../DataTable.js';
import { styleMap } from 'lit/directives/style-map.js';
import { schemaModel as schemaIcon } from '../../../md/icons/Icons.js';
import { property } from 'lit/decorators.js';
let DataCatalogTable = (() => {
    let _classSuper = DataTable;
    let _directSelect_decorators;
    let _directSelect_initializers = [];
    let _directSelect_extraInitializers = [];
    return class DataCatalogTable extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _directSelect_decorators = [property({ type: Boolean, reflect: true })];
            __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);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        /**
         * When the user makes a selection, this map will contain the selected version for a schema.
         */
        selectedVersions = new Map();
        #directSelect_accessor_storage = __runInitializers(this, _directSelect_initializers, false);
        /**
         * When set, the table will render additional column with a button to directly select the item.
         * Note, the row selection will not be available in this case.
         * @attribute
         */
        get directSelect() { return this.#directSelect_accessor_storage; }
        set directSelect(value) { this.#directSelect_accessor_storage = value; }
        constructor() {
            super();
            __runInitializers(this, _directSelect_extraInitializers);
            if (this.directSelect) {
                this.selection = 'none';
            }
            else {
                this.selection = 'single';
                this.active = true;
            }
        }
        willUpdate(cp) {
            if (cp.has('directSelect')) {
                if (this.directSelect) {
                    this.selection = 'none';
                    this.active = false;
                    this.clearSelection();
                }
                else {
                    this.selection = 'single';
                    this.active = true;
                }
            }
            if (cp.has('items')) {
                this.clearSelection();
            }
        }
        clearSelection() {
            this.selectedVersions.clear();
            const hasSelected = this.selectedItems[0];
            this.selectedItems = [];
            if (hasSelected) {
                this.notifySelect([]);
            }
        }
        handleVersionSelect(e) {
            const target = e.detail.item;
            const value = target.dataset.value;
            const key = target.dataset.key;
            if (!value || !key) {
                return;
            }
            this.selectedVersions.set(key, value);
            const popover = this.shadowRoot?.getElementById(`select-${key}`);
            if (popover) {
                popover.hidePopover();
            }
            const anchor = this.shadowRoot?.querySelector(`[popovertarget="select-${key}"]`);
            if (anchor) {
                anchor.focus();
            }
            this.requestUpdate();
            const selected = this.selectedItems[0];
            if (selected && selected.key === key) {
                // if the selected item is the one that was just updated, notify the parent
                this.notifySelect([selected]);
            }
        }
        notifySelect(selectedItems) {
            const selected = selectedItems[0];
            const detail = {};
            if (selected) {
                detail.item = selected;
                detail.version = this.selectedVersions.get(selected.key) || selected.versions[0].version;
            }
            this.dispatchEvent(new CustomEvent('select', {
                detail,
            }));
        }
        renderHeader() {
            const result = [
                this.renderHeaderCell('Name', 0),
                this.renderHeaderCell('Version', 1, { delegateFocus: true }),
                this.renderHeaderCell('Lifecycle', 2),
                this.renderHeaderCell('Organization', 3),
                this.renderHeaderCell('Published', 4),
            ];
            if (this.directSelect) {
                result.push(this.renderHeaderCell('', 5, { classes: ['actions'], delegateFocus: true, ariaLabel: 'Actions' }));
            }
            return result;
        }
        renderRowValues(item, index) {
            const result = [
                this.#nameCell(item, index, 0),
                this.#versionCell(item, index, 1),
                this.#lifecycleCell(item, index, 2),
                this.#organizationCell(item, index, 3),
                this.#publishedCell(item, index, 4),
            ];
            if (this.directSelect) {
                result.push(this.#actionCell(item, index, 5));
            }
            return result;
        }
        #nameCell(item, row, col) {
            const content = html `<ui-icon class="cell-icon" role="presentation">${schemaIcon}</ui-icon> ${item.name}`;
            return this.renderCell(content, row, col, { classes: ['primary-cell'], isPrimary: true });
        }
        #versionCell(item, row, col) {
            if (item.versions.length === 1) {
                return this.renderCell(item.versions[0].version, row, col, { classes: ['version'] });
            }
            const selectedVersion = this.selectedVersions.get(item.key) || item.versions[0].version;
            const content = html `<ui-button
        size="xs"
        color="text"
        class="version-label"
        trailingIcon
        popovertarget="select-${item.key}"
        style="${styleMap({ 'anchor-name': `--select-${item.key}` })}"
        part="version-button"
        ><ui-icon slot="icon">arrow_drop_down</ui-icon>${selectedVersion}</ui-button
      ><ui-listbox
        popover="auto"
        id="select-${item.key}"
        class="version-listbox"
        role="listbox"
        aria-label="Select version"
        style="${styleMap({ 'position-anchor': `--select-${item.key}` })}"
        part="version-listbox"
        @select="${this.handleVersionSelect}"
      >
        ${item.versions.map((version) => html `<ui-list-item
              class="version-item"
              role="option"
              lines="two"
              data-value="${version.version}"
              data-key="${item.key}"
              aria-selected="${version.version === selectedVersion}"
              part="version-item"
            >
              ${version.version}
              <span slot="supporting-text">${version.lifecycle}</span>
            </ui-list-item>`)}
      </ui-listbox>`;
            return this.renderCell(content, row, col, { classes: ['version'], delegateFocus: true });
        }
        #lifecycleCell(item, row, col) {
            const selectedVersion = this.selectedVersions.get(item.key) || item.versions[0].version;
            const info = item.versions.find((v) => v.version === selectedVersion);
            if (!info) {
                return this.renderCell('Unknown', row, col, { classes: ['lifecycle'] });
            }
            const lifecycle = info.lifecycle.charAt(0).toUpperCase() + info.lifecycle.slice(1);
            return this.renderCell(lifecycle, row, col, {
                classes: ['lifecycle'],
            });
        }
        #organizationCell(item, row, col) {
            return this.renderCell(item.organization, row, col, {
                classes: ['organization'],
            });
        }
        #publishedCell(item, row, col) {
            return this.renderCell(html `<ui-date-time date="${item.publishedAt}"></ui-date-time>`, row, col, {
                classes: ['published'],
            });
        }
        #actionCell(item, row, col) {
            return this.renderCell(html `<ui-button
        size="xs"
        color="outlined"
        class="select-button"
        @click="${() => this.notifySelect([item])}"
        aria-label="Select ${item.name}"
        >Select</ui-button
      >`, row, col, { classes: ['actions'], delegateFocus: true });
        }
    };
})();
/**
 * @fires CustomEvent<DataCatalogTableSelectionDetail> select - Dispatched when the selection in the table changes.
 */
export default DataCatalogTable;
//# sourceMappingURL=DataCatalogTable.js.map