import { __decorate, __metadata } from "tslib";
import '@material/mwc-textarea';
import '@material/mwc-textfield';
import '@material/mwc-button';
import '@material/mwc-dialog';
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';
let ContactUs = class ContactUs extends localize(i18next)(LitElement) {
    static get styles() {
        return [
            css `
        :host {
          --mdc-theme-primary: var(--primary-color);
        }

        * {
          box-sizing: border-box;
        }

        *:focus {
          outline: none;
        }

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

      <mwc-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">
          <mwc-textfield
            type="text"
            label=${i18next.t('label.subject')}
            dialogInitialFocus
            required
            @input=${e => {
            const val = e.target.value;
            this.subjectInput.value = val;
        }}
          ></mwc-textfield>
          <mwc-textfield
            type="text"
            name="sender"
            label=${i18next.t('label.email')}
            required
            @input=${e => {
            const val = e.target.value;
            this.senderInput.value = val;
        }}
          ></mwc-textfield>
          <mwc-textarea
            name="content"
            label=${i18next.t('label.content')}
            required
            @keydown=${e => e.stopPropagation()}
            @input=${e => {
            const val = e.target.value;
            this.contentInput.value = val;
        }}
          ></mwc-textarea>
        </div>
        <mwc-button
          slot="primaryAction"
          type="submit"
          label=${i18next.t('button.submit')}
          raised
          @click=${e => this._submit(e)}
        ></mwc-button>
        <mwc-button slot="secondaryAction" dialogAction="cancel" label=${i18next.t('button.cancel')}></mwc-button>
      </mwc-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