import { __decorate, __metadata } from "tslib";
import '@operato/data-grist';
import { css, html, LitElement } from 'lit';
import { i18next, localize } from '@operato/i18n';
import { ButtonContainerStyles } from '@operato/styles';
import gql from 'graphql-tag';
import { client } from '@operato/graphql';
import { customElement, query, state } from 'lit/decorators.js';
import { DataGrist } from '@operato/data-grist';
let PopupDomainList = class PopupDomainList extends localize(i18next)(LitElement) {
    static get styles() {
        return [
            ButtonContainerStyles,
            css `
        :host {
          display: flex;
          flex-direction: column;
          overflow-x: overlay;
          background-color: var(--main-section-background-color);
        }
        ox-grist {
          flex: 1;
        }
      `
        ];
    }
    render() {
        return html `
      <ox-grist .config=${this.config} .fetchHandler=${this.onmFetchHandler}></ox-grist>

      <div class="button-container">
        <button @click=${this.add}><md-icon>add</md-icon>${i18next.t('button.add')}</button>
      </div>
    `;
    }
    async add() {
        const selected = this.grist.selected;
        this.dispatchEvent(new CustomEvent('selected', { detail: selected }));
        history.back();
    }
    async connectedCallback() {
        super.connectedCallback();
        this.config = {
            columns: [
                { type: 'gutter', gutterName: 'sequence' },
                { type: 'gutter', gutterName: 'row-selector', multiple: true },
                { name: 'id', hidden: true },
                { name: 'name', header: i18next.t('field.domain_name'), filter: 'search' },
                { name: 'description', header: i18next.t('field.description'), filter: 'search' },
                {
                    name: 'attributes',
                    header: i18next.t('field.ceo'),
                    record: { renderer: (value) => value?.ceo || '' }
                }
            ],
            sorters: [{ name: 'description' }],
            rows: {
                appendable: false,
                selectable: { multiple: true },
                handlers: {
                    click: 'select-row-toggle'
                }
            },
            pagination: {
                infinite: true
            }
        };
    }
    async onmFetchHandler() {
        const response = await client.query({
            query: gql `
        query Domains($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
          responses: domains(filters: $filters, pagination: $pagination, sortings: $sortings) {
            items {
              id
              name
              description
              attributes
              updatedAt
            }
            total
          }
        }
      `,
            variables: {
                filters: [{ name: 'extType', value: 'power-plant', operator: 'eq' }],
                pagination: { page: 0, limit: 0 }
            }
        });
        const records = response.data.responses.items.map(v => ({ ...v, ...v.attributes }));
        return {
            total: response.data.responses.total || 0,
            records
        };
    }
};
__decorate([
    state(),
    __metadata("design:type", Object)
], PopupDomainList.prototype, "config", void 0);
__decorate([
    query('ox-grist'),
    __metadata("design:type", DataGrist)
], PopupDomainList.prototype, "grist", void 0);
PopupDomainList = __decorate([
    customElement('popup-domain-list')
], PopupDomainList);
export { PopupDomainList };
//# sourceMappingURL=popup-domain-list.js.map