import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import { ApiEditor } from './ApiEditor.js';
import { apiActionKindToIcon, apiActionKindToLabel } from '../lib/ui_mapping.js';
import '../../md/icons/ui-icon.js';
import '../../md/chip/ui-chip.js';
import '../../md/divider/ui-divider.js';
import '../../md/button/ui-button.js';
import '../../md/icon-button/ui-icon-button.js';
import '../../md/dropdown-list/ui-dropdown-list.js';
import '../../md/list/ui-list.js';
import '../../md/list/ui-list-item.js';
let ApiModelingEntityCard = (() => {
    let _classSuper = ApiEditor;
    let _exposed_decorators;
    let _exposed_initializers = [];
    let _exposed_extraInitializers = [];
    let _entity_decorators;
    let _entity_initializers = [];
    let _entity_extraInitializers = [];
    let _showCollectionActions_decorators;
    let _showCollectionActions_initializers = [];
    let _showCollectionActions_extraInitializers = [];
    return class ApiModelingEntityCard extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _exposed_decorators = [state()];
            _entity_decorators = [state()];
            _showCollectionActions_decorators = [property({ type: Boolean })];
            __esDecorate(this, null, _exposed_decorators, { kind: "accessor", name: "exposed", static: false, private: false, access: { has: obj => "exposed" in obj, get: obj => obj.exposed, set: (obj, value) => { obj.exposed = value; } }, metadata: _metadata }, _exposed_initializers, _exposed_extraInitializers);
            __esDecorate(this, null, _entity_decorators, { kind: "accessor", name: "entity", static: false, private: false, access: { has: obj => "entity" in obj, get: obj => obj.entity, set: (obj, value) => { obj.entity = value; } }, metadata: _metadata }, _entity_initializers, _entity_extraInitializers);
            __esDecorate(this, null, _showCollectionActions_decorators, { kind: "accessor", name: "showCollectionActions", static: false, private: false, access: { has: obj => "showCollectionActions" in obj, get: obj => obj.showCollectionActions, set: (obj, value) => { obj.showCollectionActions = value; } }, metadata: _metadata }, _showCollectionActions_initializers, _showCollectionActions_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #exposed_accessor_storage = __runInitializers(this, _exposed_initializers, void 0);
        /**
         * Computed exposed entity being edited.
         */
        get exposed() { return this.#exposed_accessor_storage; }
        set exposed(value) { this.#exposed_accessor_storage = value; }
        #entity_accessor_storage = (__runInitializers(this, _exposed_extraInitializers), __runInitializers(this, _entity_initializers, void 0));
        /**
         * Computed domain entity that corresponds to the exposed entity being edited.
         */
        get entity() { return this.#entity_accessor_storage; }
        set entity(value) { this.#entity_accessor_storage = value; }
        #showCollectionActions_accessor_storage = (__runInitializers(this, _entity_extraInitializers), __runInitializers(this, _showCollectionActions_initializers, false));
        /**
         * Some exposed entities (specifically downstream associated entities) may not have collection actions
         * (when the association is one-to-one and are not linked).
         * When this flag is true, the collection actions section is shown.
         * @attribute
         */
        get showCollectionActions() { return this.#showCollectionActions_accessor_storage; }
        set showCollectionActions(value) { this.#showCollectionActions_accessor_storage = value; }
        setupModel(model, domainKey) {
            this.exposed = undefined;
            this.entity = undefined;
            if (!model || !domainKey) {
                return;
            }
            const exposed = model.exposes.find((exposed) => exposed.key === domainKey);
            this.exposed = exposed;
            if (!exposed) {
                return;
            }
            const domain = model.domain;
            if (!domain) {
                return;
            }
            const entity = domain.findEntity(exposed.entity.key, exposed.entity.domain);
            if (!entity) {
                return;
            }
            this.entity = entity;
        }
        handleMenuSelect(e) {
            const item = e.detail.item;
            if (!item) {
                return;
            }
            switch (item.dataset.item) {
                case 'remove':
                    this.dispatchEvent(new Event('remove'));
                    break;
            }
        }
        handleActionChipClick(e) {
            const chip = e.currentTarget;
            const { kind } = chip.dataset;
            if (!kind) {
                return;
            }
            this.dispatchEvent(new CustomEvent('select', {
                detail: { kind },
                bubbles: true,
                composed: true,
            }));
        }
        handleEditButtonClick() {
            this.dispatchEvent(new Event('edit'));
        }
        render() {
            const { exposed, entity } = this;
            if (!exposed || !entity) {
                return nothing;
            }
            return html `<div class="entity-card">
      <div class="entity">${this.renderHeader(exposed, entity)} ${this.renderActions(exposed)}</div>
      <ui-divider type="middle"></ui-divider>
      <div class="footer">
        <div class="action-buttons">
          <ui-button color="text" @click="${this.handleEditButtonClick}">Edit</ui-button>
        </div>
        <ui-dropdown-list @select="${this.handleMenuSelect}" closeOnOutsideClick>
          <ui-icon-button aria-label="More options"><ui-icon icon="moreVert"></ui-icon></ui-icon-button>
          <ui-list slot="dropdown" role="menu">
            <ui-list-item role="menuitem" data-item="remove">Remove</ui-list-item>
          </ui-list>
        </ui-dropdown-list>
      </div>
    </div>`;
        }
        /**
         * Renders the header section of the entity card.
         * @param exposed The exposed entity
         * @param entity The domain entity
         * @returns The template for the header section
         */
        renderHeader(exposed, entity) {
            const path = exposed.hasCollection ? exposed.collectionPath || exposed.resourcePath : exposed.resourcePath;
            return html `
      <div class="header">
        <ui-icon class="icon" icon="schemaEntity"></ui-icon>
        <div class="headline">
          <div class="title title-medium">${entity.info.getLabel()}</div>
          <div class="path body-small">${path}</div>
        </div>
      </div>
    `;
        }
        /**
         * Renders the actions section.
         * @param exposed The exposed entity
         * @returns The template for the actions section
         */
        renderActions(exposed) {
            const content = [];
            if (this.showCollectionActions) {
                content.push(this.renderCollectionActions(exposed));
            }
            content.push(this.renderResourceActions(exposed));
            return html `<div class="actions-section">
      <div class="actions-headline title-small">Actions</div>
      ${content}
    </div>`;
        }
        /**
         * Renders the collection actions section.
         * @param exposed The exposed entity
         * @returns The template for the collection actions section
         */
        renderCollectionActions(exposed) {
            const actions = exposed.actions.filter((a) => a.kind === 'list' || a.kind === 'create' || a.kind === 'search');
            return html `<div class="collection actions">
      <div class="actions-title label-small">Collection</div>
      ${this.renderActionsList(actions, 'collection')}
    </div>`;
        }
        /**
         * Renders the resource actions section.
         * @param exposed The exposed entity
         * @returns The template for the resource actions section
         */
        renderResourceActions(exposed) {
            const actions = exposed.actions.filter((a) => a.kind === 'read' || a.kind === 'update' || a.kind === 'delete');
            return html `<div class="resource actions">
      <div class="actions-title label-small">Resource</div>
      ${this.renderActionsList(actions, 'resource')}
    </div>`;
        }
        /**
         * Renders a list of API actions.
         * @param actions The list of API actions to render.
         * @param type The type of actions ('collection' or 'resource').
         * @returns A TemplateResult containing the rendered actions list.
         */
        renderActionsList(actions, type) {
            let content;
            if (actions.length === 0) {
                content = html `<div class="no-actions body-small">This entity has no ${type} actions.</div>`;
            }
            else {
                content = html `<div class="chip-list">
        ${repeat(actions, (action) => action.kind, (action) => html `<ui-chip
              class="action-chip"
              type="assist"
              data-kind="${action.kind}"
              @click="${this.handleActionChipClick}"
            >
              <ui-icon class="chip-icon" slot="icon">${apiActionKindToIcon(action.kind)}</ui-icon>
              ${apiActionKindToLabel(action.kind)}
            </ui-chip>`)}
      </div>`;
            }
            return content;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _showCollectionActions_extraInitializers);
        }
    };
})();
/**
 * An entity card displaying information about an exposed entity
 * in the API model, including its domain entity and configured actions.
 *
 * @fires remove - Fired when the user requests to remove the exposed entity.
 * @fires select - Fired when the user clicks on an action chip. The event detail contains the action kind.
 * @fires edit - Fired when the user clicks the Edit button.
 */
export default ApiModelingEntityCard;
//# sourceMappingURL=ApiModelingEntityCard.js.map