import { __decorate, __metadata } from "tslib";
import '@material/web/button/elevated-button.js';
import '../../components/role-selector';
import gql from 'graphql-tag';
import { css, html, LitElement } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { client } from '@operato/graphql';
import { i18next } from '@operato/i18n';
import { OxPrompt } from '@operato/popup/ox-prompt.js';
import { ButtonContainerStyles } from '@operato/styles';
let OAuth2DecisionPage = class OAuth2DecisionPage extends LitElement {
    constructor() {
        super(...arguments);
        this.data = {};
        this.user = {};
        this.client = {};
        this.domain = {};
        this.req = {};
        this.redirectURI = '';
        this.transactionID = '';
        this.roles = [];
    }
    render() {
        return html `
      <h2>Application Binding</h2>
      <p>Hi ${this.user.name}!</p>
      <p><b> ${this.client.name} </b> is requesting access to your account.</p>
      <p>Do you approve?</p>

      <form field-2column>
        <div field>
          <label
            >${i18next.t('label.company')}
            <input readonly value="${this.domain.subdomain}" />
          </label>

          <label
            >${i18next.t('label.client-id')}
            <input readonly value="${this.req.clientID}" />
          </label>
        </div>

        <div field>
          <label
            >${i18next.t('label.redirect_uri')}
            <input readonly value="${this.redirectURI}" />
          </label>

          <label
            >${i18next.t('label.state')}
            <input readonly value="${this.req.state}" />
          </label>
        </div>
      </form>

      <role-selector .roleCategory="${this.domain.name}" .roles="${this.roles}"></role-selector>

      <div class="button-container">
        <md-elevated-button @click="${() => this.decision(true)}" raised label="Allow"></md-elevated-button>
        <md-elevated-button @click="${() => this.decision(false)}" raised danger label="Deny"></md-elevated-button>
      </div>
    `;
    }
    async firstUpdated() {
        this.fetchMyRoles();
    }
    updated(changedProps) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
        if (changedProps.has('data')) {
            this.user = ((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.oauth2) === null || _b === void 0 ? void 0 : _b.user) || this.user;
            this.client = ((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.oauth2) === null || _d === void 0 ? void 0 : _d.client) || this.client;
            this.domain = ((_e = this.data) === null || _e === void 0 ? void 0 : _e.domain) || this.domain;
            this.req = ((_g = (_f = this.data) === null || _f === void 0 ? void 0 : _f.oauth2) === null || _g === void 0 ? void 0 : _g.req) || this.req;
            this.redirectURI = ((_j = (_h = this.data) === null || _h === void 0 ? void 0 : _h.oauth2) === null || _j === void 0 ? void 0 : _j.redirectURI) || this.redirectURI;
            this.transactionID = ((_l = (_k = this.data) === null || _k === void 0 ? void 0 : _k.oauth2) === null || _l === void 0 ? void 0 : _l.transactionID) || this.transactionID;
        }
    }
    async fetchMyRoles() {
        var _a;
        const response = await client.query({
            query: gql `
        query myRoles {
          myRoles {
            id
            name
            description
          }
        }
      `
        });
        if (!((_a = response.errors) === null || _a === void 0 ? void 0 : _a.length)) {
            this.roles = response.data.myRoles;
        }
    }
    async decision(allowOrCancel) {
        const selectedRoles = this.selectedRoles();
        if (allowOrCancel && !(selectedRoles === null || selectedRoles === void 0 ? void 0 : selectedRoles.length)) {
            await OxPrompt.open({
                title: i18next.t('title.nothing selected'),
                text: i18next.t('text.should select at least one of x', { x: i18next.t('label.role') }),
                confirmButton: { text: i18next.t('button.confirm') }
            });
            return;
        }
        let data = {
            transaction_id: this.transactionID,
            subdomain: this.domain.subdomain,
            appKey: this.req.clientID,
            state: this.req.state,
            email: this.user.email,
            scopes: selectedRoles
        };
        if (!allowOrCancel) {
            data.cancel = 'Deny';
        }
        const response = await fetch('/oauth/decision', {
            method: 'POST',
            mode: 'cors',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            redirect: 'follow',
            body: JSON.stringify(data)
        });
        if (response.redirected) {
            location.href = response.url;
        }
    }
    selectedRoles() {
        return this.roleSelector.selectedRoles();
    }
};
OAuth2DecisionPage.styles = [
    ButtonContainerStyles,
    css `
      :host {
        display: flex;
        flex-direction: column;

        border: 1px solid var(--md-sys-color-primary);
        margin: var(--spacing-medium);
        padding: var(--spacing-medium);
        font: normal 15px var(--theme-font);
        color: var(--md-sys-color-secondary);
      }

      [field-2column] {
        border-radius: var(--border-radius);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px 15px;
        clear: both;
        max-width: var(--input-container-max-width);
      }

      [field] {
        display: flex;
        flex-direction: column;
        padding-bottom: var(--spacing-medium);
      }

      input {
        border: var(--border-dim-color);
        border-radius: var(--border-radius);
        margin: var(--input-margin);
        padding: var(--input-padding);
        min-width: 250px;
        font: var(--input-font);
      }

      label {
        display: flex;
        flex-direction: column;
        font: var(--label-font);
        color: var(--label-color, var(--md-sys-color-on-surface));
        text-transform: var(--label-text-transform);
      }

      md-elevated-button {
        margin-right: var(--spacing-small);
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], OAuth2DecisionPage.prototype, "data", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], OAuth2DecisionPage.prototype, "user", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], OAuth2DecisionPage.prototype, "client", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], OAuth2DecisionPage.prototype, "domain", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], OAuth2DecisionPage.prototype, "req", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], OAuth2DecisionPage.prototype, "redirectURI", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], OAuth2DecisionPage.prototype, "transactionID", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], OAuth2DecisionPage.prototype, "roles", void 0);
__decorate([
    query('role-selector'),
    __metadata("design:type", Object)
], OAuth2DecisionPage.prototype, "roleSelector", void 0);
OAuth2DecisionPage = __decorate([
    customElement('oauth2-decision')
], OAuth2DecisionPage);
//# sourceMappingURL=oauth2-decision-page.js.map