import { __decorate, __metadata } from "tslib";
import { html, css, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import gql from 'graphql-tag';
import { connect } from 'pwa-helpers/connect-mixin';
import { store } from '@operato/shell';
import { client } from '@operato/graphql';
import { i18next } from '@operato/i18n';
import { notify } from '../utils/notify';
let ProcessTemplateInfo = class ProcessTemplateInfo extends connect(store)(LitElement) {
    constructor() {
        super();
        this.username = '';
        this.template = {
            name: '',
            description: '',
            visibility: 'private'
        };
    }
    stateChanged(state) {
        var _a, _b;
        this.username = ((_b = (_a = state.auth) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.username) || '';
    }
    get isMine() {
        var _a, _b;
        return ((_b = (_a = this.template) === null || _a === void 0 ? void 0 : _a.creator) === null || _b === void 0 ? void 0 : _b.username) === this.username;
    }
    render() {
        return html `
      <form>
        <fieldset>
          <legend>${i18next.t('label.process-template')}</legend>
          <label>${i18next.t('field.name')}</label>
          <input
            name="name"
            .value=${this.template.name}
            @input=${e => (this.template.name = e.target.value)}
            ?disabled=${!this.isMine}
          />
          <label>${i18next.t('field.description')}</label>
          <textarea
            name="description"
            .value=${this.template.description}
            @input=${e => (this.template.description = e.target.value)}
            ?disabled=${!this.isMine}
          ></textarea>
          <label>${i18next.t('field.visibility')}</label>
          <select
            name="visibility"
            .value=${this.template.visibility}
            @change=${e => (this.template.visibility = e.target.value)}
            ?disabled=${!this.isMine}
          >
            <option value="private">${i18next.t('label.visibility-private')}</option>
            <option value="domain">${i18next.t('label.visibility-domain')}</option>
            <option value="public">${i18next.t('label.visibility-public')}</option>
          </select>
          <div buttons>
            ${this.isMine
            ? html `
                  <button type="button" @click=${this.onUpdate}>${i18next.t('button.save')}</button>
                  <button type="button" @click=${this.onDelete}>${i18next.t('button.delete')}</button>
                `
            : ''}
          </div>
        </fieldset>
      </form>
    `;
    }
    async onUpdate() {
        const formData = new FormData(this.form);
        const patch = {};
        for (const [key, value] of formData.entries()) {
            patch[key] = value;
        }
        try {
            await client.mutate({
                mutation: gql `
          mutation ($id: String!, $patch: ProcessTemplatePatch!) {
            updateProcessTemplate(id: $id, patch: $patch) {
              id
            }
          }
        `,
                variables: {
                    id: this.template.id,
                    patch
                }
            });
            notify('info', i18next.t('text.process-template updated'));
            this.dispatchEvent(new CustomEvent('updated', { bubbles: true, composed: true }));
        }
        catch (ex) {
            notify('error', ex, ex);
        }
    }
    async onDelete() {
        if (!confirm(i18next.t('text.confirm_delete')))
            return;
        try {
            await client.mutate({
                mutation: gql `
          mutation ($id: String!) {
            deleteProcessTemplate(id: $id)
          }
        `,
                variables: { id: this.template.id }
            });
            notify('info', i18next.t('text.process-template deleted'));
            this.dispatchEvent(new CustomEvent('deleted', { bubbles: true, composed: true }));
        }
        catch (ex) {
            notify('error', ex, ex);
        }
    }
};
ProcessTemplateInfo.styles = [
    css `
      :host {
        height: 100%;
        min-width: 360px;

        display: flex;
        flex-direction: column;
        position: relative;
        background-color: var(--main-section-background-color);
      }

      form {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: var(--form-grid-gap);
        grid-auto-rows: minmax(24px, auto);
        padding: var(--padding-wide);
        align-items: center;

        --form-grid-gap: 2px 0;
        --input-field-padding: var(--padding-default);
        --legend-padding: var(--padding-default) 0 var(--padding-narrow) 0;
        --mdc-button-horizontal-padding: var(--padding-default);
      }

      [buttons] {
        grid-column: span 12;
        padding: var(--padding-default) 0;
        text-align: right;
      }

      [buttons] * {
        margin: 0 0 0 var(--margin-narrow);
      }

      [danger] {
        float: left;
        margin: 0 var(--margin-narrow) 0 0;
        --mdc-theme-primary: var(--status-danger-color);
      }

      fieldset {
        display: contents;
      }
      legend {
        grid-column: span 12;
        padding: var(--legend-padding);
        font: var(--legend-font);
        color: var(--primary-color);
        text-transform: capitalize;
      }
      label {
        grid-column: span 12;
        text-transform: capitalize;
        color: var(--label-color);
        font: var(--label-font);
      }

      input,
      textarea,
      select {
        grid-column: span 12;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 6px 8px;
        font-size: 1rem;
        margin-bottom: 8px;
      }
      textarea {
        min-height: 100px;
        resize: none;
      }
      div[buttons] {
        grid-column: span 12;
        text-align: right;
        margin-top: 12px;
      }
      button {
        margin-left: 8px;
        padding: 6px 16px;
        border-radius: 4px;
        border: none;
        background: var(--md-sys-color-tertiary, #1976d2);
        color: #fff;
        font-weight: 500;
        cursor: pointer;
      }
      button[disabled] {
        background: #ccc;
        cursor: not-allowed;
      }

      @media screen and (max-width: 460px) {
        :host {
          width: 100vw;
        }
      }
    `
];
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], ProcessTemplateInfo.prototype, "template", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], ProcessTemplateInfo.prototype, "username", void 0);
__decorate([
    query('form'),
    __metadata("design:type", HTMLFormElement)
], ProcessTemplateInfo.prototype, "form", void 0);
ProcessTemplateInfo = __decorate([
    customElement('process-template-info'),
    __metadata("design:paramtypes", [])
], ProcessTemplateInfo);
export { ProcessTemplateInfo };
//# sourceMappingURL=process-template-info.js.map