import { __decorate, __metadata } from "tslib";
import '@things-factory/component-ui';
import '../../components/partner-info-card';
import '../../components/partner-role-editor';
import '../../components/invite-customer';
import gql from 'graphql-tag';
import { css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { client, gqlContext } from '@operato/graphql';
import { i18next } from '@operato/i18n';
import { PageView, store } from '@operato/shell';
let PartnerManagement = class PartnerManagement extends connect(store)(PageView) {
    constructor() {
        super(...arguments);
        this.customers = [];
        this.vendors = [];
    }
    get context() {
        return {
            title: `${i18next.t('title.partners')}`,
            help: 'operato-hub/partners'
        };
    }
    render() {
        const data = {
            [i18next.t('label.customers')]: this.customers || [],
            [i18next.t('label.vendors')]: this.vendors || []
        };
        return html `
      <h2>partners</h2>

      <quick-find-list
        .data="${data}"
        .contentRenderer="${(item, currentTabKey) => html `
          ${currentTabKey === i18next.t('label.customers')
            ? html `
                <partner-role-editor
                  class="role-editor"
                  .customer="${item}"
                  @contractTerminated="${this.refreshPartners.bind(this)}"
                ></partner-role-editor>
              `
            : html `<partner-info-card .partner="${item}"></partner-info-card>`}
        `}"
      >
      </quick-find-list>

      <invite-customer
        .customers=${this.customers || []}
        @invitationCompleted="${this.refreshPartners.bind(this)}"
      ></invite-customer>
    `;
    }
    pageUpdated() {
        if (this.active) {
            this.refreshPartners();
        }
        else {
            /* this page is deactivated */
        }
    }
    async refreshPartners() {
        var _a;
        const response = await client.query({
            query: gql `
        query {
          customers {
            id
            name
            description
          }
          vendors {
            id
            name
            description
          }
        }
      `,
            context: gqlContext()
        });
        if (!((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length)) {
            this.customers = response.data.customers;
            this.vendors = response.data.vendors;
        }
    }
};
PartnerManagement.styles = [
    css `
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--md-sys-color-background);
        padding: var(--spacing-large);

        overflow: auto;
      }
      h2 {
        margin: var(--title-margin);
        font: var(--title-font);
        color: var(--title-text-color);
      }
      .role-editor {
        flex: 1;
      }
    `
];
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], PartnerManagement.prototype, "customers", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], PartnerManagement.prototype, "vendors", void 0);
PartnerManagement = __decorate([
    customElement('partner-management')
], PartnerManagement);
//# sourceMappingURL=partner-management.js.map