import { __decorate, __metadata } from "tslib";
import '@operato/data-grist';
import gql from 'graphql-tag';
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { client } from '@operato/graphql';
import { i18next } from '@operato/i18n';
import { isMobileDevice } from '@operato/utils';
let MyLoginHistory = class MyLoginHistory extends LitElement {
    constructor() {
        super(...arguments);
        this.histories = [];
    }
    render() {
        var _a;
        if (!((_a = this.histories) === null || _a === void 0 ? void 0 : _a.length))
            return html ``;
        const config = {
            rows: { appendable: false },
            pagination: { infinite: true },
            columns: [
                { type: 'gutter', gutterName: 'sequence' },
                {
                    type: 'object',
                    name: 'accessDomain',
                    header: i18next.t('field.domain'),
                    record: { editable: false },
                    width: 200
                },
                {
                    type: 'datetime',
                    name: 'accessedAt',
                    header: i18next.t('field.accessed-at'),
                    record: { editable: false },
                    width: 200
                },
                {
                    type: 'string',
                    name: 'accessorIp',
                    header: i18next.t('field.ip_address'),
                    record: { editable: false },
                    width: 200
                }
            ]
        };
        return html `
      <ox-grist
        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
        .config=${config}
        .data="${{ records: this.histories }}"
      ></ox-grist>
    `;
    }
    firstUpdated() {
        this.fetchLoginHistories();
    }
    async fetchLoginHistories() {
        var _a;
        try {
            const response = await client.query({
                query: gql `
          query myLoginHistories($limit: Float!) {
            myLoginHistories(limit: $limit) {
              accessDomain {
                name
              }
              accessorIp
              accessedAt
            }
          }
        `,
                variables: { limit: this.limit || 10 }
            });
            if ((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length)
                return;
            this.histories = response.data.myLoginHistories.map(loginHistory => (Object.assign(Object.assign({}, loginHistory), { accessedAt: loginHistory.accessedAt - new Date().getTimezoneOffset() * 60 * 1000 })));
        }
        catch (e) {
            this.showToast('message' in e ? e.message : e);
        }
    }
    showToast(message) {
        document.dispatchEvent(new CustomEvent('notify', { detail: { message } }));
    }
};
MyLoginHistory.styles = css `
    :host {
      display: flex;
      flex-direction: column;
      background-color: var(--main-section-background-color);
      padding: var(--padding-wide);
      overflow: auto;
    }
    ox-grist {
      flex: 1;
    }
  `;
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], MyLoginHistory.prototype, "histories", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], MyLoginHistory.prototype, "limit", void 0);
MyLoginHistory = __decorate([
    customElement('my-login-history')
], MyLoginHistory);
//# sourceMappingURL=my-login-history.js.map