import { PolymerElement, html } from '../node_modules/@polymer/polymer/polymer-element.js';
import '../node_modules/@polymer/app-layout/app-header/app-header.js';
import '../node_modules/@polymer/app-layout/app-layout.js';
import '../node_modules/@polymer/app-layout/app-scroll-effects/effects/waterfall.js';
import '../node_modules/@polymer/iron-icon/iron-icon.js';
import '../node_modules/@polymer/iron-icons/iron-icons.js';
import '../node_modules/@polymer/iron-icons/av-icons.js';
import '../node_modules/@polymer/iron-icons/communication-icons.js';
import '../node_modules/@polymer/iron-icons/device-icons.js';
import '../node_modules/@polymer/iron-icons/image-icons.js';
import '../node_modules/@polymer/iron-icons/hardware-icons.js';
import '../node_modules/@polymer/iron-icons/maps-icons.js';
import '../node_modules/@polymer/iron-icons/notification-icons.js';
import '../node_modules/@polymer/iron-icons/places-icons.js';
import '../node_modules/@polymer/iron-icons/social-icons.js';
import '../node_modules/@polymer/iron-list/iron-list.js';
import '../node_modules/@polymer/paper-dialog/paper-dialog.js';
import '../node_modules/@polymer/paper-icon-button/paper-icon-button.js';
import '../node_modules/@polymer/paper-toast/paper-toast.js';
import '../node_modules/@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '../node_modules/@polymer/paper-item/paper-item-body.js';
import '../node_modules/@polymer/paper-item/paper-icon-item.js';
import '../node_modules/@polymer/paper-listbox/paper-listbox.js';
import '../node_modules/@polymer/paper-item/paper-item.js';
import './smart-device.js';
import { SmartLight } from './smart-light.js';
import { SmartBlinds } from './smart-blinds.js';
import { SmartScene } from './smart-scene.js';
import { SmartOutlet } from './smart-outlet.js';
import { SmartSwitch } from './smart-switch.js';
export const SMART_HOME_CLOUD_ENDPOINT = '/smart-home-api';
let nextDeviceId = 0;
let nipx = 0;

const getNextDeviceId = () => {
  return nextDeviceId++;
}; //Get the information of the url parameters to show to the user


function info() {
  let query = window.location.search.substr(1); //Get all the parameters contained in the URL after "?"
  // Split each parameter into a key-value pair

  let keyValues = query.split('&');
  let parameter = new Map();

  for (let i in keyValues) {
    // Split into <key>=<value>
    let param = keyValues[i];
    let splitParam = param.split('=');
    parameter.set(splitParam[0], splitParam[1]);
  }

  if (parameter.get('info') == 'dataok') {
    alert('Vos données ont bien été mises à jour.');
  }

  if (parameter.get('info') == 'nopass') {
    alert('La modification a échoué !\nLe mot de passe est incorrect.');
  }
}

info();
/**
 * Container class which manages smart devices.
 */

export class MyApp extends PolymerElement {
  /**
   * @return {string} HTML tag.
   */
  static get template() {
    return html`
    <style>
      :host {
        --app-primary-color: #5dc662;
        --app-secondary-color: black;
        display: block;
      }

      #app-header {
        color: #fff;
        background-color: var(--app-primary-color);
        z-index: 1;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      }

      #app-header paper-icon-button {
        --paper-icon-button-ink-color: white;
        width: 45px;
        height: 45px;
      }

      #app-header paper-listbox {
        background-color: var(--app-primary-color);
        padding-top: 4px;
        padding-bottom: 0px;
      }

      #app-header paper-icon-item{
        color: white;
        cursor: pointer;
        border-top: solid white 1px;
      }

      #app-header iron-icon{
        color: white;
      }

      #app-header paper-item-body{
          padding: 6px ;
      }

      .ipx-alert {
        max-width: 100%;
        color: #fff;
        padding: 15px;
        margin-bottom: 15px;
        background: rgb(255, 159, 85);
        text-align: center;
        overflow-wrap: break-word;
      }

      #modal {
        width: 60%;
        display: -webkit-flex;
        /* Safari */
        -webkit-justify-content: space-around;
        /* Safari 6.1+ */
        display: flex;
        justify-content: space-around;
        /*overflow-y: scroll;*/
        padding: 24px 0px 24px 24px;
      }

      .show-password {
        width: 25px;
        position: absolute;
        bottom: 10px;
        right: 10px;
        cursor: pointer;
      }

      .square {
        height: 180px;
        width: 180px;
        margin: auto;
        background: none;
        border: none;
        outline: none;
      }

      .square:hover {
        background-color: rgb(238, 238, 238);
      }

      .square:disabled {
        background: #DADADA;
        opacity: 0.5;
      }

      .notavailable {
        background: none;
        color: red;
      }

      iron-icon {
        height: 55%;
        width: 55%;
        color: #757575;
      }

      #accountid {
        width: 35%;
      }

      paper-button {
	      font-size: 16px;
        cursor: pointer;
      }

      ::slotted(iron-icon) {
        padding-top: 20px;
        padding-bottom: 22px;
        width: 128px;
        height: 128px;
      }

      .custombutton {
        width: 100%;
      }

      .custompad{
          padding: 0px 16px;
      }

      .custominput{
          width: calc(100% - 20px);
          margin: auto;
          text-align: left;
          padding: 10px;
      }

      .customicon{
        width: 30px;
        height: 30px;
        margin-right: 16px;
      }

      #mailUser {
         color: #eeeeee;
         padding-bottom: 10px;
      }

      input{
        margin: 0px 20px;
        padding: 10px;
      }

      #close {
        height: 30px;
        width: 80px;
        margin-top: 0px;
        float: right;
        padding: 0;
      }

      #close>iron-icon {
        height: 100%;
        width: 100%;
        cursor: pointer;
        cursor: hand;
      }

      p, label {
        color: #757575;
        font-family: 'Roboto', 'Noto', sans-serif;
        font-size: 15px;
      }

      a {
        color: black;
        font-family: 'Roboto', 'Noto', sans-serif;
        font-size: 15px;
        text-decoration: none;
      }

      .ipxinputs {
        width: 180px;
        padding: 0 30px;
      }

      .numberipx {
        width: 22px;
        height: 22px;
        text-align: center;
        padding: 3px;
        margin-top: 22px;
        margin-bottom: 0;
        border: solid;
      }

      #no-devices-msg {
        width: 60%;
        margin: 20% auto;
      }

      #no-devices-msg>p {
        text-align: center;
      }

      #check {
        display: none;
      }

      #DeleteConf> paper-input {
        width: 60%;
      }

      paper-dialog paper-button {
        padding: 10px 24px;
      }

      .dismiss {
        margin-left: 55px;
      }

      .hideIPX {
        display: none;
      }

      #ipx1, #ipx2, #ipx3, #ipx4, #ipx5 {
        flex-direction: row;
      }

      @media screen and (max-width: 800px) {
        paper-dialog {
          width: 100% !important;
          margin-top: 15px;
          margin-bottom: 15px;
          margin-left: 10px;
          margin-right: 10px;
          max-width: 95% !important;
        }

        #accountsetting div {
          padding: 5px;
        }

        #accountsetting div custombutton {
          padding: 10px 10px;
        }

        #modal {
          width: 95%;
          left: 0 !important;
          overflow-y: auto;
        }

        #modal h1 {
          font-size: 20px !important;
        }

        #myipxsetting {
          position: absolute !important;
          top:0;
          overflow-y: auto;
        }

        #ipx1, #ipx2, #ipx3, #ipx4, #ipx5 {
          flex-direction: column !important;
          align-items: center;
        }

        iron-list {
          height: 550px;
          display: flex;
          justify-content: center;
          align-items: flex-start;
        }

        iron-list .item {
          display: inline;
          position: static;
        }

        .separator {
          border-bottom: solid 1px #000;
          margin: 5px;
        }
      }
    </style>

      <!-- Main content -->
      <div id="app-header">
        <app-toolbar>
      <!-- Drop-down menu when pressing the menu button in the "toolbar": show account,
          change his account parameters, link to GCE website and disconnection -->
          <paper-menu-button id="menulist" vertical-offset="60">
            <paper-icon-button id="menu" icon="menu" slot="dropdown-trigger" on-tap="_showData"></paper-icon-button>
            <paper-listbox id="list" slot="dropdown-content">
              <paper-item-body two-line><div class='custompad' style="color:white;" id="nameUser"></div>
              <div secondary class='custompad' id="mailUser"></div></paper-item>
              <a href="proxy.php?url=http%3A%2F%2Fgce-electronics.com%2F" target="_blank" style="border-top: solid white 0.5px;">
              <paper-icon-item id="webGCE"><iron-icon icon="social:public" slot="item-icon"></iron-icon>GCE Electronics<img style="width:10px;transform:translateY(-5px);margin-left:5px" src="proxy.php?url=https%3A%2F%2Fsmart.gce-electronics.com%2Fimages%2Flink.png"/></paper-icon-item>
              </a>
              <paper-icon-item id="myipx"><iron-icon icon="hardware:memory" slot="item-icon"></iron-icon>Mes IPXs</paper-icon-item>
              <paper-icon-item id="account"><iron-icon icon="account-box" slot="item-icon"></iron-icon>Compte</paper-icon-item>
              <paper-icon-item id="disco"><iron-icon icon="power-settings-new" slot="item-icon"></iron-icon>Déconnexion</paper-icon-item>
            </paper-listbox>
          </paper-menu-button>
          <div main-title>Smart Home GCE</div>
          <paper-icon-button title="Ajouter appareil" id="add" icon="add"></paper-icon-button>
        </app-toolbar>
      </div>

      <div class="ipx-alert" hidden="[[hideAlert]]">
        Vous n'avez pas encore lié d'IPX800_V4 à votre compte, vous pouvez le
        faire dès maintenant en cliquant le bouton en haut à gauche, onglet "Mes IPXs".
      </div>

      <paper-toast id="toast" text="Not signed in"></paper-toast>

    <!-- Dialog box to confirm disconnection after clicking on "Déconexion" in the dropdown menu-->
      <paper-dialog id="discomodal" modal>
        <h2>Souhaitez-vous vraiment vous déconnecter ?</h2>
        <br/>
        <form action="proxy.php?url=https%3A%2F%2Fsmart.gce-electronics.com%2Fdisconnect" method='get' id='iddisco'>
        </form>
        <div>
          <paper-button on-tap="_disconnect">Oui</paper-button>
          <paper-button dialog-dismiss>Non</paper-button>
        </div>
      </paper-dialog>

      <!-- Dialog box to add (5 max) or delete a new ipx with its mac address
            open when clicking on 'Mes IPXs' item in, the menu -->
      <paper-dialog id="myipxsetting" modal>
        <h2>Mes IPXs</h2>

        <div id="ipxlist" style="max-width: 558px;">
          <div id="ipx1" class="layout horizontal center-justified">
            <p class="numberipx">1</p>
            <paper-input id="nameipx1" class="ipxinputs" label="Nom de l'IPX"></paper-input>
            <p style="margin-top: 28px">-</p>
            <paper-input id="macipx1" class="ipxinputs" label="Adresse MAC de l'IPX"></paper-input>
            <paper-icon-button title="Retirer IPX" id="ipx1b" style="margin-top: 16px" icon="delete" on-tap="_deleteIPX"></paper-icon-button>
          </div>

          <div id="ipx2"  class="hideIPX">
            <p class="numberipx">2</p>
            <paper-input id="nameipx2" class="ipxinputs" label="Nom de l'IPX"></paper-input>
            <p style="margin-top: 28px">-</p>
            <paper-input id="macipx2" class="ipxinputs" label="Adresse MAC de l'IPX"></paper-input>
            <paper-icon-button title="Retirer IPX" id="ipx2b" style="margin-top: 16px" icon="delete" on-tap="_deleteIPX"></paper-icon-button>
          </div>

          <div id="ipx3" class="hideIPX">
            <p class="numberipx">3</p>
            <paper-input id="nameipx3" class="ipxinputs" label="Nom de l'IPX"></paper-input>
            <p style="margin-top: 28px">-</p>
            <paper-input id="macipx3" class="ipxinputs" label="Adresse MAC de l'IPX"></paper-input>
            <paper-icon-button title="Retirer IPX" id="ipx3b" style="margin-top: 16px" icon="delete" on-tap="_deleteIPX"></paper-icon-button>
          </div>

          <div id="ipx4" class="hideIPX">
            <p class="numberipx">4</p>
            <paper-input id="nameipx4" class="ipxinputs" label="Nom de l'IPX"></paper-input>
            <p style="margin-top: 28px">-</p>
            <paper-input id="macipx4" class="ipxinputs" label="Adresse MAC de l'IPX"></paper-input>
            <paper-icon-button title="Retirer IPX" id="ipx4b" style="margin-top: 16px" icon="delete" on-tap="_deleteIPX"></paper-icon-button>
          </div>

          <div id="ipx5" class="hideIPX">
            <p class="numberipx">5</p>
            <paper-input id="nameipx5" class="ipxinputs" label="Nom de l'IPX"></paper-input>
            <p style="margin-top: 28px">-</p>
            <paper-input id="macipx5" class="ipxinputs" label="Adresse MAC de l'IPX"></paper-input>
            <paper-icon-button title="Retirer IPX" id="ipx5b" style="margin-top: 16px" icon="delete" on-tap="_deleteIPX"></paper-icon-button>
          </div>
        </div>

        <br/>
        <div class="layout horizontal center-justified">
        <paper-icon-button title="Ajouter IPX" id="addIPX" icon="add" on-tap="_addIPX"></paper-icon-button>
        </div>
        <br/>
        <div style="display:flex;justify-content:space-around;aling-items:center">
          <paper-button id="saveipxs" dialog-confirm autofocus on-tap="_storeipxs">Enregistrer</paper-button>
          <paper-button dialog-dismiss class="dismiss">Annuler</paper-button>
        </div>
      </paper-dialog>

    <!-- Dialog box to choose parameters we wish to change after clicking on "Compte" in the dropdown menu -->
      <paper-dialog id="accountsetting" modal>
        <h2>Mon compte</h2>
        <div>
            <paper-button class="custombutton" raised id="changeids">
                <iron-icon  class="customicon" icon="social:person"></iron-icon>
                Modifier mes identifiants
            </paper-button>
              <br/>
              <br/>
            <paper-button class="custombutton" raised id="changepassword">
                <iron-icon  class="customicon" icon="communication:vpn-key"></iron-icon>
                Modifier mon mot de passe
            </paper-button>
            <br/>
            <br/>
            <paper-button class="custombutton" raised id="deleteAccount">
                <iron-icon  class="customicon" icon="delete-forever"></iron-icon>
                Supprimer mon compte
            </paper-button>
	    <br/>
            <br/>
            <paper-button style="margin: 10px 114px;" dialog-confirm autofocus>OK</paper-button>
     	</div>
         </paper-dialog>

      <!-- Dialog box to change account parameters (username & email) after clicking on "Modifier mes identifiants"
            in the previous (Mon compte) dialog box-->
      <paper-dialog id="accountid" modal>
        <h2>Modifier mes identifiants</h2>
        <div>
          <form action="proxy.php?url=https%3A%2F%2Fsmart.gce-electronics.com%2Fmodif_id" method='post' id='idform'>
            <paper-input class="custominput" id="username" label="Identifiant" name="paper_username">>
                <iron-icon  class="customicon" icon="social:person" slot="prefix" ></iron-icon>
            </paper-input>
            <br/>
            <paper-input class="custominput" id="email" label="Adresse@email" name="paper_email">
                <iron-icon class="customicon" icon="communication:email" slot="prefix" ></iron-icon>
            </paper-input>
            <br/>
            <paper-input class="custominput" id="password" label="Mot de passe nécéssaire pour valider"  type="password" name="password">
            <iron-icon  class="customicon" icon="communication:vpn-key" slot="prefix"></iron-icon>
            </paper-input>

            <input id="newname" type="hidden" name="newname">
            <input id="newemail" type="hidden" name="newemail">
            <input id="confirmpass" type="hidden" name="confirmpass">
          </form>
        </div>
        <br/>
        <div>
          <paper-button dialog-confirm autofocus on-tap="_setaccountid">Enregistrer</paper-button>
          <paper-button dialog-dismiss class="dismiss">Annuler</paper-button>
        </div>
      </paper-dialog>

      <!-- Dialog box to change account password after clicking on "Modifier mon moit de passe" in the previous (Mon compte) dialog box-->
      <paper-dialog id="accountpass" modal>
        <h2>Modifier mon mot de passe</h2>
        <div>
          <form action="proxy.php?url=https%3A%2F%2Fsmart.gce-electronics.com%2Fmodif_pass" method='post' id='passform'>
            <paper-input id="old_password" class="custominput" label="Ancien mot de passe"  type="password" name="old_password">
            </paper-input>
            <br>

            <div style="position:relative">
              <paper-input id="new_password" class="custominput" label="Nouveau mot de passe"  type="password" name="new_password">
              </paper-input>

              <iron-icon title="Voir/masquer mot de passe" id="show_password" class="show-password" on-tap="_showPassword" icon="visibility"></iron-icon>
            </div>

            <br/>

            <div style="position:relative">
              <paper-input id="confirm_password" class="custominput" label="Confirmation Mot de passe"  type="password" name="confirm_password">
              </paper-input>

              <iron-icon title="Voir/masquer mot de passe" id="show_confirm_password" class="show-password" on-tap="_showConfirmPassword" icon="visibility"></iron-icon>
            </div>

            <input id="oldpass" type="hidden" name="oldpass">
            <input id="newpass" type="hidden" name="newpass">
          </form>
        </div>
        <br/>
        <div>
          <paper-button on-tap="_setaccountpass" dialog-confirm autofocus>Enregistrer</paper-button>
          <paper-button dialog-dismiss class="dismiss">Annuler</paper-button>
        </div>
      </paper-dialog>

    <!-- Dialog box to confirm deleting the account-->
      <paper-dialog id="DeleteConf" modal>
        <h2>Confirmer la suppression du compte?</h2>
        <div>
          <form action="proxy.php?url=https%3A%2F%2Fsmart.gce-electronics.com%2FdelUser" method='post' id='deleteform'>

            <paper-input id="confirm_delete" class="custominput" label="Mot de passe de confirmation"  type="password" name="confirm_delete" autofocus>
            </paper-input>

            <input id="confpass" type="hidden" name="confpass">

          </form>
        </div>
        <br/>
        <div>
          <paper-button on-tap="_deleteAccount" dialog-confirm >Oui</paper-button>
          <paper-button dialog-dismiss>Non</paper-button>
        </div>
      </paper-dialog>

      <paper-dialog id="progress-dialog">
        <p id="progress-dialog-content"></p>
      </paper-dialog>

      <!-- Dialog box to choose the device we want to add: list of all available devices-->
      <paper-dialog id="modal" modal>
        <div class="layout horizontal center-justified">
          <h1>Ajouter un appareil</h1>

          <button dialog-confirm autofocus class="square" id="lightSelector"
            on-tap="_addMonochromeLight">
            <iron-icon icon="image:wb-incandescent"></iron-icon>
            <p>Lumière</p>
          </button>

          <button dialog-confirm autofocus class="square" on-tap="_addBlinds">
            <iron-icon icon="av:call-to-action"></iron-icon>
            <p>Volets/Garage</p>
          </button>

          <button dialog-confirm autofocus class="square" id="outletSelector"
            on-tap="_addOutlet">
            <iron-icon icon="notification:power"></iron-icon>
            <p>Prise</p>
          </button>

          <button dialog-confirm autofocus class="square" id="switchSelector"
            on-tap="_addSwitch">
            <iron-icon icon="communication:call-merge"></iron-icon>
            <p>Switch</p>
          </button>
  <!--
          <button dialog-confirm autofocus class="square" id="kettleSelector"
            on-tap="_addKettle">
            <iron-icon icon="maps:local-drink"></iron-icon>
            <p>Bouilloire</p>
          </button>
          <button dialog-confirm autofocus class="square" on-tap="_addCoffeeMaker">
            <iron-icon icon="maps:local-cafe"></iron-icon>
            <p>Cafetière</p>
          </button>
          <button disabled dialog-confirm autofocus class="square" id="thermostatSelector"
            on-tap="_addThermostat">
            <p class="notavailable">Pas disponible</p>
            <iron-icon icon="image:brightness-7"></iron-icon>
            <p>Thermostat</p>
          </button>
          <button disabled dialog-confirm autofocus class="square" id="fanSelector"
            on-tap="_addFan">
            <p class="notavailable">Pas disponible</p>
            <iron-icon icon="hardware:toys"></iron-icon>
            <p>Ventilateur</p>
          </button>
          <button disabled dialog-confirm autofocus class="square" on-tap="_addSprinkler">
            <p class="notavailable">Pas disponible</p>
            <iron-icon icon="image:filter-vintage"></iron-icon>
            <p>Arroseur</p>
          </button>
  -->
        </div>
        <div id="close">
          <iron-icon icon="icons:close" dialog-confirm autofocus></iron-icon>
        </div>
      </paper-dialog>

      <div id="no-devices-msg" hidden="[[hide]]">
        <p class="layout horizontal center-justified">
          Vous n'avez pas d'appareils connectés pour le moment. Pour ajouter un appreil,
          cliquez sur le bouton "+" en haut à doite.
        </p>
      </div>

      <div style="width: 100%;min-height:100vh;margin-top:64px">
        <iron-list id="lights-list" items="[[lights]]" as="item" grid>
          <template>
            <div class="item">
              <smart-light device=[[item]]></smart-light>
            </div>
          </template>
        </iron-list>

        <div class="separator"></div>

        <iron-list id="blinds-list" items="[[blinds]]" as="item" grid>
          <template>
            <div class="item">
              <smart-blinds device=[[item]]></smart-blinds>
            </div>
          </template>
        </iron-list>

        <div class="separator"></div>

        <iron-list id="outlets-list" items="[[outlets]]" as="item" grid>
          <template>
            <div class="item">
              <smart-outlet device=[[item]]></smart-outlet>
            </div>
          </template>
        </iron-list>

        <div class="separator"></div>

        <iron-list id="switchs-list" items="[[switchs]]" as="item" grid>
          <template>
            <div class="item">
              <smart-switch device=[[item]]></smart-switch>
            </div>
          </template>
        </iron-list>
      </div>

      <div class="separator"></div>

    <!--
    <iron-list id="thermostats-list" items="[[thermostats]]" as="item"
      grid>
      <template>
        <div class="item">
          <smart-thermostat device=[[item]]></smart-thermostat>
        </div>
      </template>
    </iron-list>

    <iron-list id="fans-list" items="[[fans]]" as="item" grid>
      <template>
        <div class="item">
          <smart-fan device=[[item]]></smart-fan>
        </div>
      </template>
    </iron-list>

    <iron-list id="kettles-list" items="[[kettles]]" as="item" grid>
      <template>
        <div class="item">
          <smart-kettle device=[[item]]></smart-kettle>
        </div>
      </template>
    </iron-list>

    <iron-list id="coffeemakers-list" items="[[coffeemakers]]" as="item"
      grid>
      <template>
        <div class="item">
          <smart-coffeemaker device=[[item]]></smart-coffeemaker>
        </div>
      </template>
    </iron-list>

      <iron-list id="sprinklers-list" items="[[sprinklers]]" as="item"
        grid>
        <template>
          <div class="item">
            <smart-sprinkler device=[[item]]></smart-sprinkler>
          </div>
        </template>
      </iron-list> -->

      `;
  }
  /**
   * @return {object} Properties of this class
   */


  static get properties() {
    return {
      hide: {
        type: Boolean,
        value: false
      },
      hideAlert: {
        type: Boolean,
        value: true
      },
      deviceCount: {
        type: Number,
        value: 0
      },
      lights: {
        type: Array,
        value: []
      },
      blinds: {
        type: Array,
        value: []
      },
      thermostats: {
        type: Array,
        value: []
      },
      scenes: {
        type: Array,
        value: []
      },
      fans: {
        type: Array,
        value: []
      },
      kettles: {
        type: Array,
        value: []
      },
      coffeemakers: {
        type: Array,
        value: []
      },
      outlets: {
        type: Array,
        value: []
      },
      switchs: {
        type: Array,
        value: []
      },
      sprinklers: {
        type: Array,
        value: []
      }
    };
  }
  /**
   * Callback that runs when the HTML element is created.
   */


  connectedCallback() {
    if (!IPXS || Object.keys(IPXS).length == 0) {
      this.hideAlert = false;
    } else {
      this.hideAlert = true;
    }

    super.connectedCallback();
    this.ExistDevice(); //display the existed devices

    this._initipxs(); //init the IPXs dialog box
    // event to open the different dialog boxes


    window.requestAnimationFrame(() => {
      this.$.add.addEventListener('tap', e => this.$.modal.open());
      this.$.disco.addEventListener('tap', e => this.$.discomodal.open()); //When we click on the button with the "account" id in the toolbar dropdown menu, the "accountsettings" dialog box opens

      this.$.account.addEventListener('tap', e => this.$.accountsetting.open());
      this.$.myipx.addEventListener('tap', e => this.$.myipxsetting.open());
      this.$.changeids.addEventListener('tap', e => this.$.accountid.open());
      this.$.changepassword.addEventListener('tap', e => this.$.accountpass.open());
      this.$.deleteAccount.addEventListener('tap', e => this.$.DeleteConf.open());
    });
  } //function called when clicking the '+' on the IPXs dialog box


  _showPassword() {
    if (this.$.new_password.type == "password") {
      this.$.new_password.type = "text";
      this.$.show_password.icon = "visibility-off";
    } else {
      this.$.new_password.type = "password";
      this.$.show_password.icon = "visibility";
    }
  }

  _showConfirmPassword() {
    if (this.$.confirm_password.type == "password") {
      this.$.confirm_password.type = "text";
      this.$.show_confirm_password.icon = "visibility-off";
    } else {
      this.$.confirm_password.type = "password";
      this.$.show_confirm_password.icon = "visibility";
    }
  }

  _addIPX() {
    nipx++;
    this.$['ipx' + nipx].style.display = 'flex';

    if (nipx == 5) {
      this.$['addIPX'].style.display = 'none';
    }
  } //function called when clicking on the bin icon of a device


  _deleteIPX(event) {
    let path = event.path || event.composedPath && event.composedPath();
    this.$[path[3].id].style.display = 'none'; //even.path[3].id represent the id (form: ipx+'number')

    this.$['name' + path[3].id].value = ''; // of the ipx we wish to delete

    this.$['mac' + path[3].id].value = '';
    nipx--;
    this.$['addIPX'].style.display = 'flex';
  } //initialize the IPXs list of the user in the dialog box


  _initipxs() {
    var that = this;

    if (IPXS != null && Object.keys(IPXS).length != 0) {
      //if at least 1 IPX is already stored
      Object.keys(IPXS).forEach(function (name) {
        nipx++;
        that.$['nameipx' + nipx].value = name;
        that.$['macipx' + nipx].value = IPXS[name];
        that.$['ipx' + nipx].style.display = 'flex';
      });
    } else {
      nipx++;
      that.$['nameipx' + nipx].value = '';
      that.$['macipx' + nipx].value = '';
      that.$['ipx' + nipx].style.display = 'flex';
    }
  } //function called when cliccking on the 'Enregistrer' button of the dialog box


  _storeipxs() {
    IPXS = {};

    for (var i = 1; i < 6; i++) {
      if (this.$['ipx' + i].style.display == 'flex') {
        IPXS[this.$['nameipx' + i].value] = this.$['macipx' + i].value;
      }
    }

    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        ipxs: IPXS
      })
    };
    fetch(SMART_HOME_CLOUD_ENDPOINT + '/ipxs', options).then(() => {
      //it send the IPXs list to the database
      window.location.reload();
    });
  }

  _disconnect() {
    // return fetch('/disconnect');
    // Remove cache data
    this.$['iddisco'].submit();
  } //function which is called when clicking on 'enregister' on the 'Modifier mes identifiants' dialog box,


  _setaccountid() {
    if (this.$['username'].value != window.USERNAME || this.$['email'].value != window.EMAIL) {
      //Check if one of the ids have changed
      this.$['newname'].value = this.$['username'].value;
      this.$['newemail'].value = this.$['email'].value;
      this.$['confirmpass'].value = this.$['password'].value;
      this.$['idform'].submit(); //If true, submit the account information form
    }
  } //function which is called when clicking on 'enregister' on the 'Modifier mon mot de passe' dialog box,


  _setaccountpass() {
    if (this.$['new_password'].value == this.$['confirm_password'].value) {
      //Check if the passwords enterred are the same
      this.$['oldpass'].value = this.$['old_password'].value;
      this.$['newpass'].value = this.$['new_password'].value;
      this.$['passform'].submit(); //If true, submit the password form
    } else {
      alert('Les mots de passes sont différents !');
    }
  } //function which is called when clicking on 'oui' on the delete account form dialog box,


  _deleteAccount() {
    this.$['confpass'].value = this.$['confirm_delete'].value;
    this.$['deleteform'].submit(); //If true, submit the delete form
  }
  /**
   * Shows message in a progress dialog box.
   * @param {string} message Message to display.
   */


  showProgress(message) {
    this.$['progress-dialog-content'].innerHTML = message || 'no message';
    this.$['progress-dialog'].show();
  }
  /**
   * Closes progress dialog box.
   */


  hideProgress() {
    this.$['progress-dialog'].close();
  }
  /**
   * Shows a message that there are no devices.
   */


  showNoDeviceMessage() {
    this.hide = false;
  }
  /**
   * Hides a message that there are no devices.
   */


  hideNoDeviceMessage() {
    this.hide = true;
  }
  /**
   * Removes a device.
   * @param {string} type The type of device to remove.
   * @param {number} index The index of the device of this type.
   */


  removeDevice(type, index, deviceId) {
    this.splice(type, index, 1); //delete the device in the devices tab

    this.hide = --this.deviceCount > 0;
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        userId: UID,
        deviceId: deviceId
      })
    };
    return fetch(SMART_HOME_CLOUD_ENDPOINT + '/remove-device', options); //send request to delete in DB
  }
  /**
   * Displays a toast message.
   * @param {string} toastmsg The message to be displayed.
   */


  showToast(toastmsg) {
    this.$.toast.text = toastmsg;
    this.$.toast.open();
  }
  /**
   * get the user data to show it in the frontend application (menu display).
   */


  _showData() {
    this.$['nameUser'].innerHTML = window.USERNAME;
    this.$['mailUser'].innerHTML = window.EMAIL;
    this.$['username'].value = window.USERNAME;
    this.$['email'].value = window.EMAIL;
  }

  _genUuid() {
    return Math.floor(Math.random() * 100000).toString(36);
  }
  /**
   * Creates a new device
   * @param {object} device The device that is being created. It can be
   *   undefined.
   * @return {Promise} A promise.
   *   If the device parameter exists and has
   *   an id, it resolves with the device object. If the promise is
   *   rejected, the device has not been defined and must be created.
   *   The rejection includes the device id to use.
   */


  _createDevice(device) {
    this.$['progress-dialog'].close(); // Close modal

    this.hideNoDeviceMessage();
    this.deviceCount++; // If the device variable exists, resolve to use it

    if (device && device.hasOwnProperty('id')) {
      return Promise.resolve(device);
    } // Otherwise reject the variable and create a new one


    return Promise.reject(getNextDeviceId());
  }
  /**
   * Adds a new device to a particular device type array.
   * @param {string} type The type of device.
   * @param {object} device The device object.
   */


  _addDevice(type, device) {
    this.push(type, device);
    const options = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        userId: UID,
        device: device
      })
    };
    return fetch(SMART_HOME_CLOUD_ENDPOINT + `/register-device`, options).then(() => {}).catch(error => {
      console.error('>>> failed to register device in DB');
    });
  }
  /**
   * Adds a new smart light that supports RGB colors.
   * @param {object} light The device object
   */


  _addLight(light) {
    this._createDevice(light).then(device => {
      this._addDevice('lights', device);
    }).catch(lightId => {
      this._addDevice('lights', SmartLight.generateRgb(lightId, this.lights.length));
    });
  }
  /**
   * Adds a new smart light that supports monochrome.
   * @param {object} light The device object
   */


  _addMonochromeLight(light) {
    this._createDevice(light).then(device => {
      this._addDevice('lights', device);
    }).catch(lightId => {
      this._addDevice('lights', SmartLight.generateMonochrome(lightId, this.lights.length));
    });
  }
  /**
   * Adds a new smart blinds.
   * @param {object} blinds The device object
   */


  _addBlinds(blinds) {
    this._createDevice(blinds).then(device => {
      this._addDevice('blinds', device);
    }).catch(blindsId => {
      this._addDevice('blinds', SmartBlinds.generate(blindsId, this.blinds.length));
    });
  }
  /**
   * Creates a new scene to control all lights at once.
   * @param {object} scene The device object
   */


  _addScene(scene) {
    this._createDevice(scene).then(device => {
      this._addDevice('scenes', device);
    }).catch(sceneId => {
      this._addDevice('scenes', SmartScene.generate(sceneId, this.scenes.length));
    });
  }
  /**
   * Adds a new smart outlet
   * @param {object} outlet The device object
   */


  _addOutlet(outlet) {
    this._createDevice(outlet).then(device => {
      this._addDevice('outlets', device);
    }).catch(outletId => {
      this._addDevice('outlets', SmartOutlet.generate(outletId, this.outlets.length));
    });
  }
  /**
   * Adds a new smart switch
   * @param {object} smartswitch The device object
   */


  _addSwitch(smartswitch) {
    this._createDevice(smartswitch).then(device => {
      this._addDevice('switchs', device);
    }).catch(switchId => {
      this._addDevice('switchs', SmartSwitch.generate(switchId, this.switchs.length));
    });
  } // /**
  //  * Adds a new smart thermostat.
  //  * @param {event} event
  //  * @param {object} thermostat The device object
  //  */
  // _addThermostat(event, thermostat) {
  //   this._createDevice(thermostat)
  //     .then((device) => {
  //       this._addDevice('thermostats', device);
  //     })
  //     .catch((thermostatId) => {
  //       this._addDevice('thermostats',
  //         SmartThermostat.generate(thermostatId,
  //           this.thermostats.length));
  //     });
  // }
  //
  // /**
  //  * Adds a new smart fan
  //  * @param {object} fan The device object
  //  */
  // _addFan(fan) {
  //   this._createDevice(fan)
  //     .then((device) => {
  //       this._addDevice('fans', device);
  //     })
  //     .catch((fanId) => {
  //       this._addDevice('fans',
  //         SmartFan.generate(fanId,
  //           this.fans.length));
  //     });
  // }
  //
  // /**
  //  * Adds a new smart kettle
  //  * @param {object} kettle The device object
  //  */
  // _addKettle(kettle) {
  //   this._createDevice(kettle)
  //     .then((device) => {
  //       this._addDevice('kettles', device);
  //     })
  //     .catch((kettleId) => {
  //       this._addDevice('kettles',
  //         SmartKettle.generate(kettleId,
  //           this.kettles.length));
  //     });
  // }
  //
  // /**
  //  * Adds a new smart coffee maker
  //  * @param {object} coffeeMaker The device object
  //  */
  // _addCoffeeMaker(coffeeMaker) {
  //   this._createDevice(coffeeMaker)
  //     .then((device) => {
  //       this._addDevice('coffeemakers', device);
  //     })
  //     .catch((coffeemakerId) => {
  //       this._addDevice('coffeemakers',
  //         SmartCoffeeMaker.generate(coffeemakerId,
  //           this.coffeemakers.length));
  //     });
  // }
  //
  // /**
  //  * Adds a new smart sprinkler
  //  * @param {object} sprinkler The device object
  //  */
  // _addSprinkler(sprinkler) {
  //   this._createDevice(sprinkler)
  //     .then((device) => {
  //       this._addDevice('sprinklers', device);
  //     })
  //     .catch((sprinklerId) => {
  //       this._addDevice('sprinklers',
  //         SmartSprinkler.generate(sprinklerId,
  //           this.sprinklers.length));
  //     });
  // }

  /**
  * Add the devices that have already been added by the user
  * in previous connnections to the serveur
  */
  //function called for each devices saved


  _addExistDevice(data) {
    var type = data.type;

    if (type != 'blinds') {
      type += 's';
    }

    var propDevice = data.device;

    this._createDevice(propDevice).then(propDevice => {
      this._addDevice(type, propDevice);

      nextDeviceId++;
    }).catch(() => {
      this._addDevice(type, propDevice);
    });
  }
  /**
    * Function called when the page is loaded or refreshed
    * Get all devices of the javascript app
    */


  ExistDevice() {
    var allDevices = window.DEVICES;

    for (var i = 0; i < allDevices.length; i++) {
      //for all the devices contained in 'allDevices'
      var type = allDevices[i].properties.type.split(".")[3].toLowerCase(); //get the type of the device (necessary to create a device

      var data = {
        type: type,
        device: allDevices[i]
      };

      this._addExistDevice(data);
    }
  }

}
window.customElements.define('my-app', MyApp);