import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import Clipboard from 'clipboard';
import gql from 'graphql-tag';
import { css, html } from 'lit';
import { customElement, property, queryAll } from 'lit/decorators.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { APPLICATION_TYPES } from '../../constants/application';
import { client } from '@operato/graphql';
import { navigate, PageView, store } from '@operato/shell';
let Application = class Application extends connect(store)(PageView) {
    get context() {
        return {
            title: {
                icon: 'apps',
                text: this.application.name
            }
        };
    }
    render() {
        var app = this.application || {};
        return html `
      <div>
        <h2><md-icon>apps</md-icon>&nbsp;${app.name}</h2>
        <p page-description>${app.description}</p>
      </div>

      <div icon>
        <img src=${app.icon} />
      </div>

      <form>
        <div fieldset-container>
          <fieldset>
            <legend>application</legend>
            <div field-2column>
              <div field grid-span>
                <label for="name">app name</label>
                <input id="name" type="text" name="name" .value=${app.name} />
              </div>

              <div field grid-span>
                <label for="description">description</label>
                <input id="description" type="text" name="description" .value=${app.description} />
              </div>

              <div field grid-span>
                <label for="email">contact email</label>
                <input id="email" type="text" name="email" .value=${app.email} />
              </div>

              <div field grid-span>
                <label for="type-selector">type</label>
                <select id="type-selector" name="type">
                  ${APPLICATION_TYPES.map(type => html `<option value="${app.type}" ?selected="${type === app.type ? true : false}">${type}</option>`)}
                </select>
              </div>

              <div field grid-span>
                <label for="url">application URL</label>
                <input id="url" type="text" name="url" .value=${app.url} />
              </div>

              <div field grid-span>
                <label for="icon">icon</label>
                <input id="icon" type="text" name="icon" .value=${app.icon} />
              </div>

              <div field grid-span>
                <label for="redirect-url">redirect URL</label>
                <input id="redirect-url" type="text" name="redirectUrl" .value=${app.redirectUrl} />
              </div>

              <div field grid-span>
                <label for="webhook">webhook</label>
                <input id="webhook" type="text" name="webhook" .value=${app.webhook} />
              </div>

              <div field grid-span>
                <label for="available-scopes">available-scopes</label>
                <input id="available-scopes" type="text" .value=${app.availableScopes} readonly />
              </div>

              <div field grid-span>
                <label for="auth-url">auth URL</label>
                <input id="auth-url" type="text" .value=${app.authUrl} readonly />
                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
                The endpoint for authorization server. This is used to get the authorization code.
              </div>

              <div field grid-span>
                <label for="access-token-url">access token URL</label>
                <input id="access-token-url" type="text" .value=${app.accessTokenUrl} readonly />
                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
                The endpoint for authentication server. This is used to exchange the authorization code for an access
                token.
              </div>
            </div>
          </fieldset>
        </div>

        <div fieldset-container>
          <fieldset>
            <legend>credentials</legend>
            <div field-2column>
              <div field grid-span>
                <label for="app-key">appKey</label>
                <input id="app-key" type="text" .value=${app.appKey} readonly />
                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
              </div>

              <div field grid-span>
                <label for="app-secret">appSecret</label>
                <input id="app-secret" type="text" .value=${app.appSecret} readonly />
                <button dense button-in-field clipboard-copy @click=${e => e.preventDefault()}>copy</button>
              </div>
            </div>
          </fieldset>
        </div>

        <div class="button-container">
          <button danger @click=${this.deleteApplication.bind(this)}>
            <md-icon>delete_forever</md-icon>delete this app
          </button>
          <button @click=${this.updateApplication.bind(this)}><md-icon>save</md-icon>update</button>
          <button><md-icon>passkey</md-icon>generate new secret</button>
        </div>
      </form>
    `;
    }
    firstUpdated() {
        this.clipboard = new Clipboard(this.copybuttons, {
            target: (trigger => trigger.parentElement.querySelector('input'))
        });
    }
    async pageUpdated(changes, lifecycle, before) {
        if (this.active) {
            await this.fetchApplication();
        }
    }
    async fetchApplication() {
        const response = await client.query({
            query: gql `
        query ($id: String!) {
          application(id: $id) {
            id
            name
            description
            email
            url
            icon
            redirectUrl
            authUrl
            accessTokenUrl
            webhook
            availableScopes
            appKey
            appSecret
            type
          }
        }
      `,
            variables: {
                id: this.lifecycle.resourceId
            }
        });
        this.application = response.data.application;
    }
    async updateApplication(e) {
        e.preventDefault();
        const form = this.renderRoot.querySelector('form');
        const formData = new FormData(form);
        const patch = Array.from(formData.entries()).reduce((patch, [key, value]) => {
            patch[key] = value;
            return patch;
        }, {});
        const id = this.lifecycle.resourceId;
        const response = await client.mutate({
            mutation: gql `
        mutation ($id: String!, $patch: ApplicationPatch!) {
          updateApplication(id: $id, patch: $patch) {
            id
            name
            description
            email
            url
            icon
            redirectUrl
            webhook
            appKey
            appSecret
            type
          }
        }
      `,
            variables: {
                id,
                patch
            }
        });
        if (response.errors) {
            console.error('update fail');
        }
        else {
            this.application = Object.assign(Object.assign({}, this.application), response.data.updateApplication);
            console.log('update sucess');
        }
    }
    async deleteApplication(e) {
        e.preventDefault();
        const id = this.lifecycle.resourceId;
        const response = await client.mutate({
            mutation: gql `
        mutation ($id: String!) {
          deleteApplication(id: $id)
        }
      `,
            variables: {
                id
            }
        });
        const result = response.data.deleteApplication;
        if (result) {
            console.log('delete sucess');
            navigate('applications');
        }
        else {
            console.error('delete fail');
        }
    }
};
Application.styles = [
    css `
      :host {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        position: relative;

        background-color: var(--md-sys-color-background);
        padding: var(--spacing-large);
      }

      h2 {
        margin: var(--title-margin);
        font: var(--title-font);
        color: var(--title-text-color);
      }

      [page-description] {
        margin: var(--page-description-margin);
        font: var(--page-description-font);
        color: var(--page-description-color);
      }

      [icon] {
        position: absolute;
        top: 10px;
        right: 10px;
        max-width: 80px;
      }

      [icon] img {
        max-width: 100%;
        max-height: 100%;
      }

      [button-primary] {
        background-color: var(--button-primary-background-color);
        border: var(--button-border);
        border-radius: var(--button-border-radius);
        margin: var(--button-margin);
        padding: var(--button-primary-padding);
        color: var(--button-primary-color);
        font: var(--button-primary-font);
        text-transform: var(--button-text-transform);

        text-decoration: none;
      }

      [button-primary]:hover {
        background-color: var(--button-primary-active-background-color);
        box-shadow: var(--button-active-box-shadow);
      }

      [fieldset-container] {
        background-color: var(--md-sys-color-surface);
        margin: var(--spacing-large) 0 var(--spacing-medium) 0;
        padding: var(--spacing-medium);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow);

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

        input,
        select {
          border: var(--border-dim-color);
          border-radius: var(--border-radius);
          margin: var(--input-margin);
          padding: var(--input-padding);
          font: var(--input-font);

          flex: 1;
        }

        select:focus,
        input:focus,
        button {
          outline: none;
        }

        form {
          max-width: var(--content-container-max-width);
        }
      }

      [fieldset-container] fieldset {
        margin: 0;
        margin-top: -15px;
      }

      fieldset {
        border-radius: var(--border-radius);
        border: var(--border-dim-color);
        margin: var(--fieldset-margin);
        padding: var(--fieldset-padding);
      }

      legend {
        padding: var(--legend-padding);
        font-weight: bold;
        color: var(--legend-color);
      }

      [field-2column] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 15px;
      }

      [field] {
        display: flex;
        flex-direction: column;
        position: relative;
      }

      [grid-span] {
        grid-column: span 2;
      }

      button {
        display: flex;
        align-items: center;
        gap: var(--spacing-small);
      }

      button,
      input[type='submit'],
      [button-in-field] {
        background-color: var(--button-background-color);
        border: var(--button-border);
        border-radius: var(--button-border-radius);
        padding: var(--button-padding);
        color: var(--button-color);
        font: var(--button-font);
        text-transform: var(--button-text-transform);

        margin: var(--spacing-medium) 0 var(--spacing-medium) var(--spacing-medium);
        float: right;
        text-decoration: none;
      }

      button:hover,
      input[type='submit']:hover {
        border: var(--button-activ-border);
        box-shadow: var(--button-active-box-shadow);
      }

      [button-in-field] {
        border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
        position: absolute;
        top: 12px;
        right: 0;
        max-height: 36px;
      }

      [input-hint] {
        font: var(--input-hint-font);
        color: var(--input-hint-color);
      }

      @media screen and (max-width: 480px) {
        [field] {
          grid-column: span 2;
        }
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], Application.prototype, "application", void 0);
__decorate([
    queryAll('[clipboard-copy]'),
    __metadata("design:type", Object)
], Application.prototype, "copybuttons", void 0);
Application = __decorate([
    customElement('application-page')
], Application);
//# sourceMappingURL=application.js.map