import "@material/mwc-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import LocalizeMixin from "../mixins/localize-mixin";

const STATES_INTERCEPTABLE = {
  cleaning: {
    action: "return_to_base",
    service: "return_to_base",
  },
  docked: {
    action: "start_cleaning",
    service: "start",
  },
  idle: {
    action: "start_cleaning",
    service: "start",
  },
  off: {
    action: "turn_on",
    service: "turn_on",
  },
  on: {
    action: "turn_off",
    service: "turn_off",
  },
  paused: {
    action: "resume_cleaning",
    service: "start",
  },
};

/*
 * @appliesMixin LocalizeMixin
 */
class HaVacuumState extends LocalizeMixin(PolymerElement) {
  static get template() {
    return html`
      <style>
        mwc-button {
          top: 3px;
          height: 37px;
          margin-right: -0.57em;
        }
        mwc-button[disabled] {
          background-color: transparent;
          color: var(--secondary-text-color);
        }
      </style>

      <mwc-button on-click="_callService" disabled="[[!_interceptable]]"
        >[[_computeLabel(stateObj.state, _interceptable)]]</mwc-button
      >
    `;
  }

  static get properties() {
    return {
      hass: Object,
      stateObj: Object,
      _interceptable: {
        type: Boolean,
        computed:
          "_computeInterceptable(stateObj.state, stateObj.attributes.supported_features)",
      },
    };
  }

  _computeInterceptable(state, supportedFeatures) {
    return state in STATES_INTERCEPTABLE && supportedFeatures !== 0;
  }

  _computeLabel(state, interceptable) {
    return interceptable
      ? this.localize(
          `ui.card.vacuum.actions.${STATES_INTERCEPTABLE[state].action}`
        )
      : this.localize(`component.vacuum._.${state}`);
  }

  _callService(ev) {
    ev.stopPropagation();
    const stateObj = this.stateObj;
    const service = STATES_INTERCEPTABLE[stateObj.state].service;
    this.hass.callService("vacuum", service, { entity_id: stateObj.entity_id });
  }
}
customElements.define("ha-vacuum-state", HaVacuumState);
