import "@home-assistant/webawesome/dist/components/divider/divider";
import { mdiDotsVertical } from "@mdi/js";
import type { TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { consumeLocalize } from "../common/decorators/consume-context-entry";
import { stopPropagation } from "../common/dom/stop_propagation";
import type { LocalizeFunc } from "../common/translations/localize";
import { haStyle } from "../resources/styles";
import "./ha-dropdown";
import "./ha-dropdown-item";
import "./ha-icon-button";
import "./ha-svg-icon";
import "./ha-tooltip";

export interface IconOverflowMenuItem {
  [key: string]: any;
  path: string;
  label: string;
  narrowOnly?: boolean;
  disabled?: boolean;
  tooltip?: string;
  action: () => any;
  warning?: boolean;
  divider?: boolean;
}

@customElement("ha-icon-overflow-menu")
export class HaIconOverflowMenu extends LitElement {
  @state()
  @consumeLocalize()
  private _localize!: LocalizeFunc;

  @property({ type: Array }) public items: IconOverflowMenuItem[] = [];

  @property({ type: Boolean }) public narrow = false;

  protected render(): TemplateResult | typeof nothing {
    if (this.items.length === 0) {
      return nothing;
    }
    return html`
      ${this.narrow
        ? html` <!-- Collapsed representation for small screens -->
            <ha-dropdown
              @wa-show=${this._handleIconOverflowMenuOpened}
              @click=${stopPropagation}
            >
              <ha-icon-button
                .label=${this._localize("ui.common.overflow_menu")}
                .path=${mdiDotsVertical}
                slot="trigger"
              ></ha-icon-button>

              ${this.items.map((item) =>
                item.divider
                  ? html`<wa-divider></wa-divider>`
                  : html`<ha-dropdown-item
                      ?disabled=${item.disabled}
                      @click=${item.action}
                      variant=${item.warning ? "danger" : "default"}
                    >
                      <ha-svg-icon slot="icon" .path=${item.path}></ha-svg-icon>
                      ${item.label}
                    </ha-dropdown-item>`
              )}
            </ha-dropdown>`
        : html`
            <!-- Icon representation for big screens -->
            ${this.items.map((item) =>
              item.narrowOnly
                ? nothing
                : item.divider
                  ? html`<div role="separator"></div>`
                  : html`<ha-tooltip
                        .disabled=${!item.tooltip}
                        .for="icon-button-${item.label}"
                        >${item.tooltip ?? ""} </ha-tooltip
                      ><ha-icon-button
                        .id="icon-button-${item.label}"
                        @click=${item.action}
                        .label=${item.label}
                        .path=${item.path}
                        ?disabled=${item.disabled}
                      ></ha-icon-button> `
            )}
          `}
    `;
  }

  protected _handleIconOverflowMenuOpened(e) {
    e.stopPropagation();
  }

  static get styles() {
    return [
      haStyle,
      css`
        :host {
          display: flex;
          justify-content: flex-end;
          cursor: initial;
        }
        div[role="separator"] {
          border-right: 1px solid var(--divider-color);
          width: 1px;
        }
      `,
    ];
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "ha-icon-overflow-menu": HaIconOverflowMenu;
  }
}
