text: import "@polymer/paper-input/paper-input";
  import { html } from "@polymer/polymer/lib/utils/html-tag";
  /* eslint-plugin-disable lit */
  import { PolymerElement } from "@polymer/polymer/polymer-element";
  import "../../../../components/buttons/ha-progress-button";
  import "../../../../components/ha-card";
  import "../../../../layouts/hass-subpage";
  import { EventsMixin } from "../../../../mixins/events-mixin";
  import LocalizeMixin from "../../../../mixins/localize-mixin";
  import "../../../../styles/polymer-ha-style";
  import "../../ha-config-section";
  
  /*
   * @appliesMixin EventsMixin
   * @appliesMixin LocalizeMixin
   */
  class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
    static get template() {
      return html`
      <style include="iron-flex ha-style">
        .content {
          direction: ltr;
        }
  
        [slot=introduction] {
          margin: -1em 0;
        }
        [slot=introduction] a {
          color: var(--primary-color);
        }
        a {
          color: var(--primary-color);
        }
        paper-item {
          cursor: pointer;
        }
        h1 {
          @apply --paper-font-headline;
          margin: 0;
        }
        .error {
          color: var(--google-red-500);
        }
        .card-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        [hidden] {
          display: none;
        }
      </style>
      <hass-subpage header="[[localize('ui.panel.config.cloud.register.title')]]">
        <div class="content">
          <ha-config-section is-wide="[[isWide]]">
            <span slot="header">[[localize('ui.panel.config.cloud.register.headline')]]</span>
            <div slot="introduction">
              <p>
                [[localize('ui.panel.config.cloud.register.information')]]
              </p>
              <p>
              [[localize('ui.panel.config.cloud.register.information2')]]
              </p>
              <ul>
                <li>[[localize('ui.panel.config.cloud.register.feature_remote_control')]]</li>
                <li>[[localize('ui.panel.config.cloud.register.feature_google_home')]]</li>
                <li>[[localize('ui.panel.config.cloud.register.feature_amazon_alexa')]]</li>
                <li>[[localize('ui.panel.config.cloud.register.feature_webhook_apps')]]</li>
              </ul>
              <p>
                [[localize('ui.panel.config.cloud.register.information3')]] <a href='https://www.nabucasa.com' target='_blank'>Nabu&nbsp;Casa,&nbsp;Inc</a>[[localize('ui.panel.config.cloud.register.information3a')]]
              </p>
  
              <p>
                [[localize('ui.panel.config.cloud.register.information4')]]
                </p><ul>
                  <li><a href="https://home-assistant.io/tos/" target="_blank" rel="noreferrer">[[localize('ui.panel.config.cloud.register.link_terms_conditions')]]</a></li>
                  <li><a href="https://home-assistant.io/privacy/" target="_blank" rel="noreferrer">[[localize('ui.panel.config.cloud.register.link_privacy_policy')]]</a></li>
                </ul>
              </p>
            </div>
  
            <ha-card header="[[localize('ui.panel.config.cloud.register.create_account')]]">
              <div class="card-content">
                <div class="header">
                  <div class="error" hidden$="[[!_error]]">[[_error]]</div>
                </div>
                <paper-input autofocus="" id="email" label="[[localize('ui.panel.config.cloud.register.email_address')]]" type="email" value="{{email}}" on-keydown="_keyDown" error-message="[[localize('ui.panel.config.cloud.register.email_error_msg')]]"></paper-input>
                <paper-input id="password" label="Password" value="{{_password}}" type="password" on-keydown="_keyDown" error-message="[[localize('ui.panel.config.cloud.register.password_error_msg')]]"></paper-input>
              </div>
              <div class="card-actions">
                <ha-progress-button on-click="_handleRegister" progress="[[_requestInProgress]]">[[localize('ui.panel.config.cloud.register.start_trial')]]</ha-progress-button>
                <button class="link" hidden="[[_requestInProgress]]" on-click="_handleResendVerifyEmail">[[localize('ui.panel.config.cloud.register.resend_confirmation_email')]]</button>
              </div>
            </ha-card>
          </ha-config-section>
        </div>
      </hass-subpage>
  `;
    }
  
    static get properties() {
      return {
        hass: Object,
        isWide: Boolean,
        email: {
          type: String,
          notify: true,
        },
  
        _requestInProgress: {
          type: Boolean,
          value: false,
        },
        _password: {
          type: String,
          value: "",
        },
        _error: {
          type: String,
          value: "",
        },
      };
    }
  
    static get observers() {
      return ["_inputChanged(email, _password)"];
    }
  
    _inputChanged() {
      this._error = "";
      this.$.email.invalid = false;
      this.$.password.invalid = false;
    }
  
    _keyDown(ev) {
      // validate on enter
      if (ev.keyCode === 13) {
        this._handleRegister();
        ev.preventDefault();
      }
    }
  
    _handleRegister() {
      let invalid = false;
  
      if (!this.email || !this.email.includes("@")) {
        this.$.email.invalid = true;
        this.$.email.focus();
        invalid = true;
      }
  
      if (this._password.length < 8) {
        this.$.password.invalid = true;
  
        if (!invalid) {
          invalid = true;
          this.$.password.focus();
        }
      }
  
      if (invalid) return;
  
      this._requestInProgress = true;
  
      this.hass
        .callApi("post", "cloud/register", {
          email: this.email,
          password: this._password,
        })
        .then(
          () => this._verificationEmailSent(),
          (err) => {
            // Do this before setProperties because changing it clears errors.
            this._password = "";
  
            this.setProperties({
              _requestInProgress: false,
              _error:
                err && err.body && err.body.message
                  ? err.body.message
                  : "Unknown error",
            });
          }
        );
    }
  
    _handleResendVerifyEmail() {
      if (!this.email) {
        this.$.email.invalid = true;
        return;
      }
  
      this.hass
        .callApi("post", "cloud/resend_confirm", {
          email: this.email,
        })
        .then(
          () => this._verificationEmailSent(),
          (err) =>
            this.setProperties({
              _error:
                err && err.body && err.body.message
                  ? err.body.message
                  : "Unknown error",
            })
        );
    }
  
    _verificationEmailSent() {
      this.setProperties({
        _requestInProgress: false,
        _password: "",
      });
      this.fire("cloud-done", {
        flashMessage: this.hass.localize(
          "ui.panel.config.cloud.register.account_created"
        ),
      });
    }
  }
  
  customElements.define("cloud-register", CloudRegister);
  