import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@operato/data-grist';
import gql from 'graphql-tag';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { client } from '@operato/graphql';
import { i18next } from '@operato/i18n';
import { isMobileDevice } from '@operato/utils';
import { CommonHeaderStyles } from '@operato/styles';
export class NotificationRuleImporter extends LitElement {
    constructor() {
        super(...arguments);
        this.notificationRules = [];
        this.columns = {
            list: { fields: ['name', 'description'] },
            pagination: { infinite: true },
            columns: [
                {
                    type: 'string',
                    name: 'name',
                    header: i18next.t('field.name'),
                    width: 150
                },
                {
                    type: 'string',
                    name: 'description',
                    header: i18next.t('field.description'),
                    width: 200
                },
                {
                    type: 'checkbox',
                    name: 'active',
                    header: i18next.t('field.active'),
                    width: 60
                }
            ]
        };
    }
    render() {
        return html `
      <ox-grist
        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
        .config=${this.columns}
        .data=${{
            records: this.notificationRules
        }}
      ></ox-grist>

      <div class="footer">
        <div filler></div>
        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>
      </div>
    `;
    }
    async save() {
        var _a;
        const response = await client.mutate({
            mutation: gql `
        mutation importNotificationRules($notificationRules: [NotificationRulePatch!]!) {
          importNotificationRules(notificationRules: $notificationRules)
        }
      `,
            variables: { notificationRules: this.notificationRules }
        });
        if ((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length)
            return;
        this.dispatchEvent(new CustomEvent('imported'));
    }
}
NotificationRuleImporter.styles = [
    CommonHeaderStyles,
    css `
      :host {
        display: flex;
        flex-direction: column;

        background-color: var(--md-sys-color-surface);
      }

      ox-grist {
        flex: 1;
      }
    `
];
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], NotificationRuleImporter.prototype, "notificationRules", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], NotificationRuleImporter.prototype, "columns", void 0);
//# sourceMappingURL=notification-rule-importer.js.map