import { __esDecorate, __runInitializers } from "tslib";
import { html, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { DataTable } from '../DataTable.js';
import { UserKind } from '@api-client/core/models/kinds.js';
import '../../../md/icon-button/ui-icon-button.js';
import '../../../md/icons/ui-icon.js';
import '../../../md/divider/ui-divider.js';
import '../../../md/menu/ui-menu.js';
import '../../../md/menu/ui-menu-item.js';
let UsersDataTable = (() => {
    let _classSuper = DataTable;
    let _current_decorators;
    let _current_initializers = [];
    let _current_extraInitializers = [];
    return class UsersDataTable extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _current_decorators = [property({ type: String })];
            __esDecorate(this, null, _current_decorators, { kind: "accessor", name: "current", static: false, private: false, access: { has: obj => "current" in obj, get: obj => obj.current, set: (obj, value) => { obj.current = value; } }, metadata: _metadata }, _current_initializers, _current_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #current_accessor_storage = __runInitializers(this, _current_initializers, void 0);
        /**
         * The current user id.
         */
        get current() { return this.#current_accessor_storage; }
        set current(value) { this.#current_accessor_storage = value; }
        get items() {
            return super.items;
        }
        set items(value) {
            super.items = value;
        }
        constructor() {
            super();
            __runInitializers(this, _current_extraInitializers);
            this.addEventListener('click', this.handleTableClick.bind(this));
        }
        handleTableClick(e) {
            const target = e.composedPath()[0];
            if (target.nodeType !== Node.ELEMENT_NODE) {
                return;
            }
            if (target.classList.contains('user-link')) {
                e.preventDefault();
                const { key, kind } = target.dataset;
                if (!key || !kind) {
                    return;
                }
                this.dispatchEvent(new CustomEvent('rowaction', { detail: { key, kind, action: 'open' } }));
            }
        }
        handleMenuSelect(e) {
            const menu = e.currentTarget;
            const { key, kind } = menu.dataset;
            if (!key || !kind) {
                return;
            }
            const action = e.detail.item.value;
            if (!action) {
                return;
            }
            this.dispatchEvent(new CustomEvent('rowaction', { detail: { key, kind, action } }));
        }
        renderHeader() {
            return [
                this.renderHeaderCell('Name', 0, { sort: 'name' }),
                this.renderHeaderCell('Email', 1),
                this.renderHeaderCell('Role', 2),
                this.renderHeaderCell('Status', 3),
                this.renderHeaderCell(html `<span hidden aria-label="Row options">Menu</span>`, 4, { delegateFocus: true }),
            ];
        }
        renderRowValues(item, index) {
            return [
                this.#nameCell(item, index, 0),
                this.#emailCell(item, index, 1),
                this.#roleCell(item, index, 2),
                this.#statusCell(item, index, 3),
                this.renderCell(this.#renderRowMenu(item), index, 4, { classes: ['actions'], delegateFocus: true }),
            ];
        }
        #nameCell(item, row, col) {
            let name = item.name || '(none)';
            if (this.current === item.key) {
                name += ' (You)';
            }
            let content;
            let delegateFocus = false;
            if (item.kind === UserKind) {
                content = html `<a href="#/${item.key}" data-key="${item.key}" data-kind="${item.kind}" class="user-link"
        >${name}</a
      >`;
                delegateFocus = true;
            }
            else {
                content = name;
            }
            return this.renderCell(content, row, col, { classes: ['primary-cell'], isPrimary: true, delegateFocus });
        }
        #emailCell(item, row, col) {
            let email;
            if (item.kind === UserKind) {
                if (Array.isArray(item.email) && item.email.length > 0) {
                    email = item.email[0]?.email;
                }
            }
            else {
                email = item.email;
            }
            let content;
            if (email) {
                content = html `<a href="mailto:${email}" class="email-link">${email}</a>`;
            }
            else {
                content = '--';
            }
            return this.renderCell(content, row, col, { classes: ['email'] });
        }
        #roleCell(item, row, col) {
            let role = '--';
            if (item.grantType === 'owner') {
                role = 'Owner';
            }
            else if (item.grantType === 'manager') {
                role = 'Manager';
            }
            else if (item.grantType === 'editor') {
                role = 'Editor';
            }
            else if (item.grantType === 'viewer') {
                role = 'Viewer';
            }
            return this.renderCell(role, row, col, { classes: ['role'] });
        }
        #statusCell(item, row, col) {
            let status = 'Active';
            if (item.status === 'deleted') {
                status = 'Deleted';
            }
            else if (item.status === 'pending') {
                status = 'Invitation sent';
            }
            else if (item.status === 'suspended') {
                status = 'Suspended';
            }
            else if (item.status === 'declined') {
                status = 'Declined';
            }
            return this.renderCell(status, row, col, { classes: ['status'] });
        }
        #renderRowMenu(item) {
            return item.kind === UserKind ? this.#renderUserOptions(item) : this.#renderInviteOptions(item);
        }
        #renderUserOptions(item) {
            const { key, kind, status } = item;
            const self = this.current === key;
            return html `
      <ui-icon-button
        data-key="${key}"
        data-kind="${kind}"
        id="anchor-${key}"
        aria-controls="menu-${key}"
        tabindex="-1"
        popoverTarget="menu-${key}"
      >
        <ui-icon>more_vert</ui-icon>
      </ui-icon-button>
      <ui-menu
        class="item-menu"
        popover="auto"
        id="menu-${key}"
        data-key="${key}"
        data-kind="${kind}"
        @select="${this.handleMenuSelect}"
      >
        <ui-menu-item value="open">
          <div>Details</div>
          <ui-icon slot="start">info</ui-icon>
        </ui-menu-item>
        ${status === 'active'
                ? html `<ui-menu-item value="deactivate" ?disabled="${self}">
              <div>Deactivate</div>
              <ui-icon slot="start">person_off</ui-icon>
            </ui-menu-item>`
                : nothing}
        ${status === 'suspended'
                ? html `<ui-menu-item value="activate" ?disabled="${self}">
              <div>Reactivate</div>
              <ui-icon slot="start">person_check</ui-icon>
            </ui-menu-item>`
                : nothing}

        <ui-divider role="separator"></ui-divider>
        <ui-menu-item value="delete" ?disabled="${self}">
          <div>Delete</div>
          <ui-icon slot="start">delete</ui-icon>
        </ui-menu-item>
      </ui-menu>
    `;
        }
        #renderInviteOptions(item) {
            const { key, kind } = item;
            return html `
      <ui-icon-button
        data-key="${key}"
        data-kind="${kind}"
        id="anchor-${key}"
        aria-controls="menu-${key}"
        tabindex="-1"
        popoverTarget="menu-${key}"
        aria-label="More options for the invitation to ${item.name || item.email}"
      >
        <ui-icon>more_vert</ui-icon>
      </ui-icon-button>
      <ui-menu
        class="item-menu"
        popover="auto"
        id="menu-${key}"
        data-key="${key}"
        data-kind="${kind}"
        @select="${this.handleMenuSelect}"
      >
        <ui-menu-item value="resend">
          <div>Resend</div>
          <ui-icon slot="start">send</ui-icon>
        </ui-menu-item>
        <ui-divider role="separator"></ui-divider>
        <ui-menu-item value="delete">
          <div>Cancel invitation</div>
          <ui-icon slot="start">delete</ui-icon>
        </ui-menu-item>
      </ui-menu>
    `;
        }
    };
})();
/**
 * @fires rowaction - When a menu item is clicked, this event is fired with the user key, kind, and action.
 */
export default UsersDataTable;
//# sourceMappingURL=UsersDataTable.js.map