import { __decorate, __metadata } from "tslib";
import gql from 'graphql-tag';
import { css, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { client } from '@operato/graphql';
import { navigate, PageView, store } from '@operato/shell';
let ApplianceRegister = class ApplianceRegister extends connect(store)(PageView) {
    static get styles() {
        return [
            css `
        :host {
          background-color: var(--main-section-background-color);
          padding: var(--padding-wide);

          display: flex;
          flex-direction: column;

          align-items: center;

          overflow: auto;
        }
        h2 {
          margin: var(--title-margin);
          font: var(--title-font);
          color: var(--title-text-color);
        }
        [page-description] {
          margin: var(--page-description-margin);
          font: var(--page-description-font);
          color: var(--page-description-color);
        }

        [form-container] {
          background-color: var(--theme-white-color);
          padding: var(--padding-wide);
          border-radius: var(--border-radius);
          box-shadow: var(--box-shadow);
          min-width: 60%;
          max-width: var(--input-container-max-width);
          position: relative;
          clear: both;
        }
        label {
          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);
          font: var(--input-font);

          flex: 1;
        }
        select:focus,
        input:focus {
          outline: none;
        }
        [field-2column] {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap: 15px;
          max-width: var(--content-container-max-width);
        }
        [field] {
          display: flex;
          flex-direction: column;
        }
        [grid-span] {
          grid-column: span 2;
        }
        @media screen and (max-width: 480px) {
          [form-container] {
            position: initial;
            width: 100%;
          }
          [field] {
            grid-column: span 2;
          }
        }
      `
        ];
    }
    get context() {
        return {
            title: `appliance registration`,
            help: 'auth/appliance'
        };
    }
    render() {
        return html `
      <h2>Register new appliance</h2>
      <p page-description>You can register new appliance here</p>

      <div form-container>
        <form>
          <div field-2column>
            <div field grid-span>
              <label for="name">name</label>
              <input id="name" type="text" name="name" />
            </div>

            <div field grid-span>
              <label for="description">description</label>
              <input id="description" type="text" name="description" />
            </div>

            <div field>
              <label for="brand">brand</label>
              <input id="brand" type="text" name="brand" />
            </div>

            <div field>
              <label for="serial-no">serial #</label>
              <input id="serial-no" type="text" name="serialNo" />
            </div>

            <div field>
              <label for="model">model</label>
              <input id="model" type="text" name="model" />
            </div>

            <div field>
              <label for="netmask">netmask</label>
              <input id="netmask" type="text" name="netmask" />
            </div>

            <mwc-button grid-span @click=${this.createAppliance.bind(this)} raised label="register"></mwc-button>
          </div>
        </form>
      </div>
    `;
    }
    async createAppliance(e) {
        e.preventDefault();
        const form = this.renderRoot.querySelector('form');
        const formData = new FormData(form);
        const appliance = Array.from(formData.entries()).reduce((appliance, [key, value]) => {
            appliance[key] = value;
            return appliance;
        }, {});
        const response = await client.mutate({
            mutation: gql `
        mutation ($appliance: NewAppliance!) {
          createAppliance(appliance: $appliance) {
            id
          }
        }
      `,
            variables: {
                appliance
            }
        });
        if (response.errors) {
            console.log('creation fail.');
        }
        else {
            const id = response.data.createAppliance.id;
            navigate(`appliance/${id}`);
        }
    }
    pageUpdated(changes, lifecycle, before) {
        if (this.active) {
            this.form.reset();
        }
    }
};
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], ApplianceRegister.prototype, "appliance", void 0);
__decorate([
    query('form'),
    __metadata("design:type", HTMLFormElement)
], ApplianceRegister.prototype, "form", void 0);
ApplianceRegister = __decorate([
    customElement('appliance-register')
], ApplianceRegister);
//# sourceMappingURL=register.js.map