import { __decorate, __metadata } from "tslib";
import '@material/web/textfield/filled-text-field.js';
import gql from 'graphql-tag';
import { css, html, LitElement } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { client, gqlContext } from '@operato/graphql';
import { i18next, localize } from '@operato/i18n';
import { OxPrompt } from '@operato/popup/ox-prompt.js';
let CreateRole = class CreateRole extends localize(i18next)(LitElement) {
    render() {
        return html `
      <md-filled-text-field
        type="text"
        name="name"
        label=${String(i18next.t('label.x name', { x: i18next.t('label.role') }))}
      ></md-filled-text-field>
      <md-filled-text-field
        type="text"
        name="description"
        label=${String(i18next.t('label.x description', { x: i18next.t('label.role') }))}
      ></md-filled-text-field>

      <md-outlined-button @click=${this.onCreateRole.bind(this)}
        >${String(i18next.t('button.create'))}</md-outlined-button
      >
    `;
    }
    async onCreateRole() {
        let role = {};
        const name = this.nameInput.value.trim();
        const description = this.descriptionInput.value;
        if (!name) {
            return this.showToast(i18next.t('error.value is empty', { value: i18next.t('field.name') }));
        }
        role.name = name;
        role.description = description;
        if (await OxPrompt.open({
            title: i18next.t('text.are_you_sure'),
            text: i18next.t('text.do_you_want_to_create_x', { x: i18next.t('label.role') }),
            confirmButton: { text: i18next.t('button.confirm') },
            cancelButton: { text: i18next.t('button.cancel') }
        })) {
            const response = await client.mutate({
                mutation: gql `
          mutation createRole($role: NewRole!) {
            createRole(role: $role) {
              name
            }
          }
        `,
                variables: { role },
                context: gqlContext()
            });
            if (!response.errors) {
                await this.dispatchEvent(new CustomEvent('fetch-roles'));
                await OxPrompt.open({
                    type: 'success',
                    title: i18next.t('text.completed'),
                    text: i18next.t('text.data_uploaded_successfully'),
                    confirmButton: { text: i18next.t('button.confirm') }
                });
                this.nameInput.value = '';
                this.descriptionInput.value = '';
            }
        }
    }
    showToast(message) {
        document.dispatchEvent(new CustomEvent('notify', { detail: { message, option: { timer: 1000 } } }));
    }
};
CreateRole.styles = css `
    :host {
      --md-text-field-fill-color: var(--md-sys-color-on-primary);
      background-color: var(--md-sys-color-surface);
      margin: var(--spacing-large) 0;
      padding: var(--spacing-large);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);

      display: grid;
      grid-template-columns: 1fr 2fr auto;
      gap: 5px 15px;
      clear: both;
      max-width: var(--input-container-max-width);

      align-items: center;
    }

    md-outlined-button {
      margin: var(--input-margin);
      text-transform: capitalize;
    }

    @media screen and (max-width: 480px) {
      :host {
        grid-template-columns: 1fr 1fr;
      }

      md-outlined-button {
        grid-column: span 2;

        margin: var(--input-margin);
      }
    }
  `;
__decorate([
    query('[name=name]'),
    __metadata("design:type", HTMLInputElement)
], CreateRole.prototype, "nameInput", void 0);
__decorate([
    query('[name=description]'),
    __metadata("design:type", HTMLInputElement)
], CreateRole.prototype, "descriptionInput", void 0);
CreateRole = __decorate([
    customElement('create-role')
], CreateRole);
//# sourceMappingURL=create-role.js.map