text: import "@polymer/iron-flex-layout/iron-flex-layout-classes";
  import "../../../components/ha-icon-button";
  import "@polymer/paper-item/paper-item";
  import "@polymer/paper-listbox/paper-listbox";
  import { html } from "@polymer/polymer/lib/utils/html-tag";
  /* eslint-plugin-disable lit */
  import { PolymerElement } from "@polymer/polymer/polymer-element";
  import { attributeClassNames } from "../../../common/entity/attribute_class_names";
  import "../../../components/ha-attributes";
  import "../../../components/ha-paper-dropdown-menu";
  import "../../../components/ha-switch";
  import { EventsMixin } from "../../../mixins/events-mixin";
  import LocalizeMixin from "../../../mixins/localize-mixin";
  
  /*
   * @appliesMixin EventsMixin
   */
  class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
    static get template() {
      return html`
        <style include="iron-flex"></style>
        <style>
          .container-speed_list,
          .container-direction,
          .container-oscillating {
            display: none;
          }
  
          .has-speed_list .container-speed_list,
          .has-direction .container-direction,
          .has-oscillating .container-oscillating {
            display: block;
          }
  
          ha-paper-dropdown-menu {
            width: 100%;
          }
  
          paper-item {
            cursor: pointer;
          }
        </style>
  
        <div class$="[[computeClassNames(stateObj)]]">
          <div class="container-speed_list">
            <ha-paper-dropdown-menu
              label-float=""
              dynamic-align=""
              label="[[localize('ui.card.fan.speed')]]"
            >
              <paper-listbox
                slot="dropdown-content"
                selected="[[stateObj.attributes.speed]]"
                on-selected-changed="speedChanged"
                attr-for-selected="item-name"
              >
                <template
                  is="dom-repeat"
                  items="[[stateObj.attributes.speed_list]]"
                >
                  <paper-item item-name$="[[item]]">[[item]]</paper-item>
                </template>
              </paper-listbox>
            </ha-paper-dropdown-menu>
          </div>
  
          <div class="container-oscillating">
            <div class="center horizontal layout single-row">
              <div class="flex">[[localize('ui.card.fan.oscillate')]]</div>
              <ha-switch
                checked="[[oscillationToggleChecked]]"
                on-change="oscillationToggleChanged"
              >
              </ha-switch>
            </div>
          </div>
  
          <div class="container-direction">
            <div class="direction">
              <div>[[localize('ui.card.fan.direction')]]</div>
              <ha-icon-button
                icon="hass:rotate-left"
                on-click="onDirectionReverse"
                title="[[localize('ui.card.fan.reverse')]]"
                disabled="[[computeIsRotatingReverse(stateObj)]]"
              ></ha-icon-button>
              <ha-icon-button
                icon="hass:rotate-right"
                on-click="onDirectionForward"
                title="[[localize('ui.card.fan.forward')]]"
                disabled="[[computeIsRotatingForward(stateObj)]]"
              ></ha-icon-button>
            </div>
          </div>
        </div>
  
        <ha-attributes
          state-obj="[[stateObj]]"
          extra-filters="speed,speed_list,oscillating,direction"
        ></ha-attributes>
      `;
    }
  
    static get properties() {
      return {
        hass: {
          type: Object,
        },
  
        stateObj: {
          type: Object,
          observer: "stateObjChanged",
        },
  
        oscillationToggleChecked: {
          type: Boolean,
        },
      };
    }
  
    stateObjChanged(newVal, oldVal) {
      if (newVal) {
        this.setProperties({
          oscillationToggleChecked: newVal.attributes.oscillating,
        });
      }
  
      if (oldVal) {
        setTimeout(() => {
          this.fire("iron-resize");
        }, 500);
      }
    }
  
    computeClassNames(stateObj) {
      return (
        "more-info-fan " +
        attributeClassNames(stateObj, ["oscillating", "speed_list", "direction"])
      );
    }
  
    speedChanged(ev) {
      const oldVal = this.stateObj.attributes.speed;
      const newVal = ev.detail.value;
  
      if (!newVal || oldVal === newVal) return;
  
      this.hass.callService("fan", "turn_on", {
        entity_id: this.stateObj.entity_id,
        speed: newVal,
      });
    }
  
    oscillationToggleChanged(ev) {
      const oldVal = this.stateObj.attributes.oscillating;
      const newVal = ev.target.checked;
  
      if (oldVal === newVal) return;
  
      this.hass.callService("fan", "oscillate", {
        entity_id: this.stateObj.entity_id,
        oscillating: newVal,
      });
    }
  
    onDirectionReverse() {
      this.hass.callService("fan", "set_direction", {
        entity_id: this.stateObj.entity_id,
        direction: "reverse",
      });
    }
  
    onDirectionForward() {
      this.hass.callService("fan", "set_direction", {
        entity_id: this.stateObj.entity_id,
        direction: "forward",
      });
    }
  
    computeIsRotatingReverse(stateObj) {
      return stateObj.attributes.direction === "reverse";
    }
  
    computeIsRotatingForward(stateObj) {
      return stateObj.attributes.direction === "forward";
    }
  }
  
  customElements.define("more-info-fan", MoreInfoFan);
  