class BlindsCard extends HTMLElement {

  async setConfig(config) {
    this._config = config;

    const helpers = await window.loadCardHelpers();

    this._card = await helpers.createCardElement({
      type: "custom:bubble-card",

      card_type: "button",
      button_type: "slider",

      entity: config.entity,

      force_icon: false,
      show_state: true,
      show_last_changed: false,
      show_attribute: true,
      attribute: "current_position",
      min_value: 0,

      sub_button: {
        main: [
          {
            icon: "mdi:arrow-up-bold",
            tap_action: {
              action: "perform-action",
              perform_action: "cover.open_cover",
              target: {
                entity_id: config.entity
              }
            },
            show_background: false
          },
          {
            icon: "mdi:stop",
            tap_action: {
              action: "perform-action",
              perform_action: "cover.stop_cover",
              target: {
                entity_id: config.entity
              }
            },
            show_background: false
          },
          {
            icon: "mdi:arrow-down-bold",
            tap_action: {
              action: "perform-action",
              perform_action: "cover.close_cover",
              target: {
                entity_id: config.entity
              }
            },
            show_background: false
          }
        ]
      },

      modules: [
        "cover_gradient_background_indicator"
      ],

      cover_gradient_background_indicator: {
        "0": { color: "light grey" },
        "1": { inverted: true },
        use_entity_color: false,
        use_accent_color: false,
        background_opacity: 1,
        color: "white"
      }
    });

    this.appendChild(this._card);
  }

  set hass(hass) {
    if (this._card) {
      this._card.hass = hass;
    }
  }

  getCardSize() {
    return this._card?.getCardSize?.() ?? 1;
  }
}

customElements.define("blinds-card", BlindsCard);