import { __decorate, __metadata } from "tslib";
import '@material/mwc-button';
import gql from 'graphql-tag';
import { css, html, LitElement } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { client } from '@operato/graphql';
import { i18next, localize } from '@operato/i18n';
import { OxPrompt } from '@operato/popup/ox-prompt.js';
let CreateDomainPopup = class CreateDomainPopup extends localize(i18next)(LitElement) {
    render() {
        return html `
      <div field grid-span>
        <label
          >${i18next.t('label.x name', { x: i18next.t('label.domain') })}<input
            type="text"
            name="name"
            @input=${this.checkValidation}
            autofocus
        /></label>
      </div>

      <div field grid-span>
        <label>${i18next.t('label.description')}<input type="text" name="description" /></label>
      </div>

      <div buttons>
        <mwc-button raised @click=${e => this.onCreateDomain()}>${i18next.t('button.create')}</mwc-button>
      </div>
    `;
    }
    firstUpdated() {
        this.nameInput.focus(); // autofocus
    }
    get inputData() {
        return this.renderRoot.querySelectorAll('input');
    }
    checkValidation(e) {
        const currentInput = e.currentTarget;
        const regExp = /^[a-zA-Z ]+$/;
        if (!regExp.test(currentInput.value)) {
            currentInput.classList.add('checkValidName');
        }
        else {
            currentInput.classList.remove('checkValidName');
        }
    }
    async onCreateDomain() {
        const domainInput = {};
        this.inputData.forEach(data => (domainInput[data.name] = data.value));
        const regExp = /^[a-zA-z0-9- ]+$/;
        if (!regExp.test(domainInput.name)) {
            return this.showToast(i18next.t('error: domain name should consist only of letters or dashes'));
        }
        const response = await client.mutate({
            mutation: gql `
        mutation domainRegister($domainInput: DomainGeneratorInput!) {
          domainRegister(domainInput: $domainInput) {
            id
            name
          }
        }
      `,
            variables: { domainInput }
        });
        if (!response.errors) {
            await OxPrompt.open({
                type: 'success',
                title: i18next.t('text.completed'),
                text: i18next.t('text.x_created_successfully', { x: i18next.t('label.domain') }),
                confirmButton: { text: i18next.t('button.confirm') }
            });
            history.back();
            this.dispatchEvent(new CustomEvent('fetch-data'));
        }
    }
    showToast(message) {
        document.dispatchEvent(new CustomEvent('notify', { detail: { message } }));
    }
};
CreateDomainPopup.styles = [
    css `
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);
        overflow: auto;
      }
      input.checkValidName {
        background-color: #fce6e6;
      }
      mwc-button {
        display: flex;
        justify-content: center;
      }
      label {
        display: flex;
        flex-direction: column;

        font: var(--label-font);
        color: var(--label-color);
        text-transform: var(--label-text-transform);
      }
      input {
        border: var(--border-dark-color);
        border-radius: var(--border-radius);
        margin: var(--input-margin);
        padding: var(--input-padding);
        background-color: var(--theme-white-color);
        font: var(--input-font);

        flex: 1;
      }
      [field] {
        grid-column: span 2;
      }
      [buttons] {
        margin-top: auto;
      }
    `
];
__decorate([
    query('input[name="name"]'),
    __metadata("design:type", HTMLInputElement)
], CreateDomainPopup.prototype, "nameInput", void 0);
CreateDomainPopup = __decorate([
    customElement('create-domain-popup')
], CreateDomainPopup);
//# sourceMappingURL=create-domain-popup.js.map