import { __decorate, __metadata } from "tslib";
import '@material/web/button/text-button.js';
import '@material/web/button/elevated-button.js';
import '@material/web/textfield/filled-text-field.js';
import '@material/web/dialog/dialog.js';
import '@operato/i18n';
import { css, html, LitElement } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { i18next, localize } from '@operato/i18n';
import { auth } from '@things-factory/auth-base/dist-client/auth.js';
let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
    static get styles() {
        return [
            css `
        * {
          box-sizing: border-box;
        }

        *:focus {
          outline: none;
        }

        #input-form {
          display: grid;
          grid-template-rows: 1fr 1fr 3fr;
          grid-gap: 10px 0;
        }
      `
        ];
    }
    render() {
        return html `
      <md-elevated-button @click=${e => this.dialog.show()}>${i18next.t('button.need help')}</md-elevated-button>

      <md-dialog id="dialog" heading=${i18next.t('title.need help')}>
        <form action="" method="post">
          <input id="subject-input" name="subject" type="hidden" />
          <input id="sender-input" name="sender" type="hidden" />
          <input id="content-input" name="content" type="hidden" />
        </form>

        <div id="input-form" slot="content">
          <md-filled-text-field
            type="text"
            label=${i18next.t('label.subject')}
            dialogInitialFocus
            required
            @input=${e => {
            const val = e.target.value;
            this.subjectInput.value = val;
        }}
          ></md-filled-text-field>

          <md-filled-text-field
            type="text"
            name="sender"
            label=${i18next.t('label.email')}
            required
            @input=${e => {
            const val = e.target.value;
            this.senderInput.value = val;
        }}
          ></md-filled-text-field>

          <md-filled-text-field
            name="content"
            type="textarea"
            label=${i18next.t('label.content')}
            required
            @keydown=${e => e.stopPropagation()}
            @input=${e => {
            const val = e.target.value;
            this.contentInput.value = val;
        }}
          ></md-filled-text-field>

          <md-elevated-button slot="primaryAction" type="button" @click=${e => this._submit(e)}
            >${i18next.t('button.submit')}</md-elevated-button
          >
        </div>
      </md-dialog>
    `;
    }
    _checkValidity() {
        return false;
    }
    _submit(e) {
        if (!this._checkValidity())
            return;
        const form = e.target;
        const formData = new FormData(form);
        let json = {};
        //convert form into json
        for (const [key, value] of formData.entries()) {
            json[key] = value;
        }
        auth.changePassword(json);
        form.reset();
    }
};
__decorate([
    query('#dialog'),
    __metadata("design:type", Object)
], ContactUs.prototype, "dialog", void 0);
__decorate([
    query('#subject-input'),
    __metadata("design:type", HTMLInputElement)
], ContactUs.prototype, "subjectInput", void 0);
__decorate([
    query('#sender-input'),
    __metadata("design:type", HTMLInputElement)
], ContactUs.prototype, "senderInput", void 0);
__decorate([
    query('#content-input'),
    __metadata("design:type", HTMLInputElement)
], ContactUs.prototype, "contentInput", void 0);
ContactUs = __decorate([
    customElement('contact-us')
], ContactUs);
export { ContactUs };
//# sourceMappingURL=contact-us.js.map