import { __decorate, __metadata } from "tslib";
import gql from 'graphql-tag';
import { css, html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { client } from '@operato/graphql';
import { i18next, localize } from '@operato/i18n';
import { isMobileDevice } from '@operato/utils';
import { DataGrist } from '@operato/data-grist';
let AttributeSetItemList = class AttributeSetItemList extends localize(i18next)(LitElement) {
    render() {
        return html `
      <ox-grist
        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
        .config=${this.gristConfig}
        .fetchHandler=${this.fetchHandler.bind(this)}
      ></ox-grist>
      <div class="button-container">
        <mwc-button raised danger @click=${this.deleteAttributeSetItems.bind(this)}
          >${i18next.t('button.delete')}</mwc-button
        >
        <mwc-button raised @click=${this.updateAttributeSetItems.bind(this)}>${i18next.t('button.save')}</mwc-button>
      </div>
    `;
    }
    async firstUpdated() {
        this.gristConfig = {
            list: { fields: ['name', 'description', 'active'] },
            columns: [
                { type: 'gutter', gutterName: 'row-selector', multiple: true },
                {
                    type: 'gutter',
                    gutterName: 'button',
                    icon: 'add',
                    handlers: {
                        click: 'record-copy'
                    }
                },
                { type: 'gutter', gutterName: 'sequence' },
                {
                    type: 'gutter',
                    gutterName: 'button',
                    icon: 'arrow_upward',
                    handlers: {
                        click: 'move-up'
                    }
                },
                {
                    type: 'gutter',
                    gutterName: 'button',
                    icon: 'arrow_downward',
                    handlers: {
                        click: 'move-down'
                    }
                },
                {
                    type: 'string',
                    name: 'name',
                    header: i18next.t('field.name'),
                    record: {
                        editable: true
                    },
                    width: 140
                },
                {
                    type: 'string',
                    name: 'description',
                    header: i18next.t('field.description'),
                    record: {
                        editable: true
                    },
                    width: 180
                },
                {
                    type: 'string',
                    name: 'tag',
                    header: i18next.t('field.tag'),
                    record: {
                        editable: true
                    },
                    width: 180
                },
                {
                    type: 'checkbox',
                    name: 'active',
                    label: true,
                    header: i18next.t('field.active'),
                    record: {
                        editable: true
                    },
                    sortable: true,
                    width: 60
                },
                {
                    type: 'checkbox',
                    name: 'hidden',
                    label: true,
                    header: i18next.t('field.hidden'),
                    record: {
                        editable: true
                    },
                    sortable: true,
                    width: 60
                },
                {
                    type: 'select',
                    name: 'type',
                    header: i18next.t('field.type'),
                    record: {
                        options: ['', 'number', 'text', 'select', 'boolean', 'date', 'datetime', 'file'],
                        editable: true
                    },
                    width: 120
                },
                {
                    type: 'parameters',
                    name: 'options',
                    header: i18next.t('field.options'),
                    record: {
                        editable: true,
                        renderer: 'json5',
                        options: async (value, column, record, row, field) => {
                            return {
                                name: record.type,
                                help: '',
                                spec: record.type === 'select'
                                    ? [
                                        {
                                            type: 'options' /* property-editor type */,
                                            name: 'options',
                                            label: 'options'
                                        }
                                    ]
                                    : [],
                                context: this.grist,
                                objectified: true
                            };
                        }
                    },
                    width: 120
                }
            ],
            rows: {
                selectable: {
                    multiple: true
                }
            },
            pagination: {
                infinite: true
            },
            sorters: []
        };
    }
    async fetchHandler({ filters, page, limit, sortings = [] }) {
        const attributes = this.attribute.items || [];
        return {
            total: attributes.length,
            records: attributes
        };
    }
    async updateAttributeSetItems() {
        this.grist.commit();
        const response = await client.mutate({
            mutation: gql `
        mutation ($id: String!, $patch: AttributeSetPatch!) {
          updateAttributeSet(id: $id, patch: $patch) {
            entity
          }
        }
      `,
            variables: {
                id: this.attribute.id,
                patch: {
                    items: this.grist.data.records,
                    cuFlag: 'M'
                }
            }
        });
        if (!response.errors) {
            await document.dispatchEvent(new CustomEvent('notify', {
                detail: {
                    message: i18next.t('text.info_x_successfully', {
                        x: i18next.t('button.save')
                    })
                }
            }));
        }
    }
    async deleteAttributeSetItems() {
        if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
            return;
        }
        this.grist.deleteSelectedRecords(false);
    }
};
AttributeSetItemList.styles = [
    css `
      :host {
        display: flex;
        flex-direction: column;

        background-color: #fff;
      }

      ox-grist {
        flex: 1;
      }

      .button-container {
        display: flex;
        margin-left: auto;
        padding: var(--padding-default);
      }

      [danger] {
        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
      }
      mwc-button {
        margin-left: var(--margin-default);
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], AttributeSetItemList.prototype, "attribute", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], AttributeSetItemList.prototype, "gristConfig", void 0);
__decorate([
    query('ox-grist'),
    __metadata("design:type", DataGrist)
], AttributeSetItemList.prototype, "grist", void 0);
AttributeSetItemList = __decorate([
    customElement('attribute-set-item-list')
], AttributeSetItemList);
//# sourceMappingURL=attribute-set-item-list.js.map