<!--
panel_custom:
  - name: no-love
    sidebar_title: No love
    sidebar_icon: mdi:heart-off
    webcomponent_path: /home/bs/.homeassistant/panels/no-love.html
-->

<dom-module id="ha-panel-no-love">
  <style>
    .error {
      color: red;
    }
  </style>
  <template>
    <paper-button raised on-click="_hereWeGo">Refresh</paper-button>
    <template is="dom-repeat" items="[[_entities]]" sort="_sortAbc">
      <div>[[item]]</div>
    </template>
    <template is="dom-if" if="[[_error]]">
      <div class="error">[[_error]]</div>
    </template>
  </template>
</dom-module>

<script>
class NoLove extends Polymer.Element {
  static get is() { return 'ha-panel-no-love'; }
  static get properties() {
    return {
      hass: Object,
      _entities: Array,
      _error: String,
    };
  }

  _sortAbc(a, b) {
    return a > b ? 1 : -1;
  }

  _hereWeGo() {
    this.hass.connection.sendMessagePromise({ type: 'frontend/lovelace_config' })
      .then((conf) => {
        const inLove = new Set();

        conf.result.views.forEach((view) => {
          view.cards.forEach((card) => {
            if (card.entity) {
              inLove.add(card.entity);
            } else if (card.entities) {
              card.entities.forEach((entity) => {
                inLove.add(entity);
              });
            }
          });
        });

        const _entities = Object.keys(this.hass.states).filter(entity => !inLove.has(entity));

        this.setProperties({
          _entities,
          _errorMsg: null,
        })
      },
        err => this.setProperties({
          _entities: [],
          _errorMsg: err.message,
        })
      );
  }
}

customElements.define(NoLove.is, NoLove);
</script>