import { __decorate, __metadata } from "tslib";
import '@operato/data-grist';
import { CommonGristStyles, ScrollbarStyles } from '@operato/styles';
import { PageView, store } from '@operato/shell';
import { css, html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { DataGrist } from '@operato/data-grist';
import { client } from '@operato/graphql';
import { i18next, localize } from '@operato/i18n';
import { OxPopup } from '@operato/popup';
import { connect } from 'pwa-helpers/connect-mixin';
import gql from 'graphql-tag';
let ProcessTemplateListPage = class ProcessTemplateListPage extends connect(store)(localize(i18next)(PageView)) {
    constructor() {
        super(...arguments);
        this.visibility = '';
    }
    get context() {
        var _a;
        return {
            title: i18next.t('title.process-template list'),
            search: {
                handler: (search) => {
                    this.grist.searchText = search;
                },
                value: ((_a = this.grist) === null || _a === void 0 ? void 0 : _a.searchText) || ''
            },
            filter: {
                handler: () => {
                    this.grist.toggleHeadroom();
                }
            },
            help: 'process-modeller/process-template'
        };
    }
    render() {
        return html `
      <ox-grist mode="CARD" .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
        <div slot="headroom">
          <div id="filters">
            <ox-filters-form autofocus without-search></ox-filters-form>
          </div>
        </div>
      </ox-grist>
    `;
    }
    async pageInitialized(lifecycle) {
        this.gristConfig = {
            list: {
                thumbnail: 'thumbnail',
                fields: ['name', 'description'],
                details: ['visibility', 'creator', 'createdAt']
            },
            columns: [
                { type: 'gutter', gutterName: 'sequence' },
                {
                    type: 'string',
                    name: 'name',
                    header: i18next.t('field.name'),
                    record: {
                        editable: false
                    },
                    filter: 'search',
                    sortable: true,
                    width: 150
                },
                {
                    type: 'string',
                    name: 'description',
                    header: i18next.t('field.description'),
                    record: {
                        editable: false
                    },
                    filter: 'search',
                    width: 200
                },
                {
                    type: 'boolean',
                    name: 'mine',
                    record: {
                        editable: false
                    },
                    hidden: true,
                    width: 0
                },
                {
                    type: 'select-buttons',
                    name: 'visibility',
                    header: i18next.t('field.visibility'),
                    label: true,
                    record: {
                        editable: false
                    },
                    filter: {
                        operator: 'in',
                        options: ['private', 'public', 'domain'],
                        value: this.visibility,
                        label: '' /* empty intentionally */
                    },
                    width: 200
                },
                {
                    type: 'image',
                    name: 'thumbnail',
                    header: i18next.t('field.thumbnail'),
                    record: {
                        editable: false
                    },
                    width: 200
                },
                {
                    type: 'resource-object',
                    name: 'creator',
                    header: i18next.t('field.creator'),
                    label: true,
                    record: {
                        editable: false
                    },
                    sortable: true,
                    width: 120
                },
                {
                    type: 'datetime',
                    name: 'createdAt',
                    header: i18next.t('field.created_at'),
                    label: true,
                    record: {
                        editable: false
                    },
                    sortable: true,
                    width: 180
                }
            ],
            rows: {
                selectable: false,
                appendable: false
            },
            sorters: [
                {
                    name: 'name'
                }
            ]
        };
    }
    async pageUpdated(changes, lifecycle) {
        if (this.active) {
            this.grist.fetch();
        }
    }
    async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {
        const response = await client.query({
            query: gql `
        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
          responses: processTemplates(filters: $filters, pagination: $pagination, sortings: $sortings) {
            items {
              id
              name
              description
              model
              thumbnail
              visibility
              mine
              creator {
                id
                name
              }
              createdAt
            }
            total
          }
        }
      `,
            variables: {
                filters,
                pagination: { page, limit },
                sortings
            }
        });
        return {
            total: response.data.responses.total || 0,
            records: response.data.responses.items || []
        };
    }
};
ProcessTemplateListPage.styles = [
    ScrollbarStyles,
    CommonGristStyles,
    css `
      :host {
        display: flex;

        width: 100%;

        --grid-record-emphasized-background-color: red;
        --grid-record-emphasized-color: yellow;
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], ProcessTemplateListPage.prototype, "gristConfig", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], ProcessTemplateListPage.prototype, "visibility", void 0);
__decorate([
    query('ox-grist'),
    __metadata("design:type", DataGrist)
], ProcessTemplateListPage.prototype, "grist", void 0);
__decorate([
    query('#sorter-control'),
    __metadata("design:type", OxPopup)
], ProcessTemplateListPage.prototype, "sortersControl", void 0);
ProcessTemplateListPage = __decorate([
    customElement('process-template-list-page')
], ProcessTemplateListPage);
export { ProcessTemplateListPage };
//# sourceMappingURL=process-template-list-page.js.map