import { mdiDrag, mdiPlus } from "@mdi/js";
import deepClone from "deep-clone-simple";
import type { PropertyValues } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import { storage } from "../../../../common/decorators/storage";
import { fireEvent } from "../../../../common/dom/fire_event";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { nextRender } from "../../../../common/util/render-status";
import "../../../../components/ha-button";
import "../../../../components/ha-button-menu";
import "../../../../components/ha-sortable";
import "../../../../components/ha-svg-icon";
import type {
  AutomationClipboard,
  Trigger,
  TriggerList,
} from "../../../../data/automation";
import { isTriggerList } from "../../../../data/trigger";
import type { HomeAssistant } from "../../../../types";
import {
  PASTE_VALUE,
  showAddAutomationElementDialog,
} from "../show-add-automation-element-dialog";
import { automationRowsStyles } from "../styles";
import "./ha-automation-trigger-row";
import type HaAutomationTriggerRow from "./ha-automation-trigger-row";
import { ensureArray } from "../../../../common/array/ensure-array";

@customElement("ha-automation-trigger")
export default class HaAutomationTrigger extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public triggers!: Trigger[];

  @property({ attribute: false }) public highlightedTriggers?: Trigger[];

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

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

  @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
    false;

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

  @state() private _rowSortSelected?: number;

  @state()
  @storage({
    key: "automationClipboard",
    state: true,
    subscribe: true,
    storage: "sessionStorage",
  })
  public _clipboard?: AutomationClipboard;

  private _focusLastTriggerOnChange = false;

  private _focusTriggerIndexOnChange?: number;

  private _triggerKeys = new WeakMap<Trigger, string>();

  protected render() {
    return html`
      <ha-sortable
        handle-selector=".handle"
        draggable-selector="ha-automation-trigger-row"
        .disabled=${this.disabled}
        group="triggers"
        invert-swap
        @item-moved=${this._triggerMoved}
        @item-added=${this._triggerAdded}
        @item-removed=${this._triggerRemoved}
      >
        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
          ${repeat(
            this.triggers,
            (trigger) => this._getKey(trigger),
            (trg, idx) => html`
              <ha-automation-trigger-row
                .sortableData=${trg}
                .index=${idx}
                .first=${idx === 0}
                .last=${idx === this.triggers.length - 1}
                .trigger=${trg}
                @duplicate=${this._duplicateTrigger}
                @insert-after=${this._insertAfter}
                @move-down=${this._moveDown}
                @move-up=${this._moveUp}
                @value-changed=${this._triggerChanged}
                .hass=${this.hass}
                .disabled=${this.disabled}
                .narrow=${this.narrow}
                .highlight=${this.highlightedTriggers?.includes(trg)}
                .optionsInSidebar=${this.optionsInSidebar}
                .sortSelected=${this._rowSortSelected === idx}
                @stop-sort-selection=${this._stopSortSelection}
              >
                ${!this.disabled
                  ? html`
                      <div
                        tabindex="0"
                        class="handle ${this._rowSortSelected === idx
                          ? "active"
                          : ""}"
                        slot="icons"
                        @keydown=${this._handleDragKeydown}
                        @click=${stopPropagation}
                        .index=${idx}
                      >
                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                      </div>
                    `
                  : nothing}
              </ha-automation-trigger-row>
            `
          )}
          <div class="buttons">
            <ha-button
              .disabled=${this.disabled}
              @click=${this._addTriggerDialog}
              .appearance=${this.root ? "accent" : "filled"}
              .size=${this.root ? "medium" : "small"}
            >
              ${this.hass.localize(
                "ui.panel.config.automation.editor.triggers.add"
              )}
              <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
            </ha-button>
          </div>
        </div>
      </ha-sortable>
    `;
  }

  private _addTriggerDialog() {
    if (this.narrow) {
      fireEvent(this, "request-close-sidebar");
    }
    showAddAutomationElementDialog(this, {
      type: "trigger",
      add: this._addTrigger,
      clipboardItem: !this._clipboard?.trigger
        ? undefined
        : isTriggerList(this._clipboard.trigger)
          ? "list"
          : this._clipboard?.trigger?.trigger,
    });
  }

  private _addTrigger = (value: string) => {
    let triggers: Trigger[];
    if (value === PASTE_VALUE) {
      triggers = this.triggers.concat(deepClone(this._clipboard!.trigger));
    } else {
      const trigger = value as Exclude<Trigger, TriggerList>["trigger"];
      const elClass = customElements.get(
        `ha-automation-trigger-${trigger}`
      ) as CustomElementConstructor & {
        defaultConfig: Trigger;
      };
      triggers = this.triggers.concat({
        ...elClass.defaultConfig,
      });
    }
    this._focusLastTriggerOnChange = true;
    fireEvent(this, "value-changed", { value: triggers });
  };

  protected updated(changedProps: PropertyValues) {
    super.updated(changedProps);

    if (
      changedProps.has("triggers") &&
      (this._focusLastTriggerOnChange ||
        this._focusTriggerIndexOnChange !== undefined)
    ) {
      const row = this.shadowRoot!.querySelector<HaAutomationTriggerRow>(
        `ha-automation-trigger-row:${this._focusLastTriggerOnChange ? "last-of-type" : `nth-of-type(${this._focusTriggerIndexOnChange! + 1})`}`
      )!;

      this._focusLastTriggerOnChange = false;
      this._focusTriggerIndexOnChange = undefined;

      row.updateComplete.then(() => {
        if (this.optionsInSidebar) {
          row.openSidebar();
          if (this.narrow) {
            row.scrollIntoView({
              block: "start",
              behavior: "smooth",
            });
          }
        } else {
          row.expand();
          row.focus();
        }
      });
    }
  }

  public expandAll() {
    const triggerRows =
      this.shadowRoot!.querySelectorAll<HaAutomationTriggerRow>(
        "ha-automation-trigger-row"
      )!;
    triggerRows.forEach((row) => {
      row.expand();
    });
  }

  private _getKey(action: Trigger) {
    if (!this._triggerKeys.has(action)) {
      this._triggerKeys.set(action, Math.random().toString());
    }

    return this._triggerKeys.get(action)!;
  }

  private _moveUp(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
    if (!(ev.target as HaAutomationTriggerRow).first) {
      const newIndex = index - 1;
      this._move(index, newIndex);
      if (this._rowSortSelected === index) {
        this._rowSortSelected = newIndex;
      }
      ev.target.focus();
    }
  }

  private _moveDown(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
    if (!(ev.target as HaAutomationTriggerRow).last) {
      const newIndex = index + 1;
      this._move(index, newIndex);
      if (this._rowSortSelected === index) {
        this._rowSortSelected = newIndex;
      }
      ev.target.focus();
    }
  }

  private _move(oldIndex: number, newIndex: number) {
    const triggers = this.triggers.concat();
    const item = triggers.splice(oldIndex, 1)[0];
    triggers.splice(newIndex, 0, item);
    this.triggers = triggers;
    fireEvent(this, "value-changed", { value: triggers });
  }

  private _triggerMoved(ev: CustomEvent): void {
    ev.stopPropagation();
    const { oldIndex, newIndex } = ev.detail;
    this._move(oldIndex, newIndex);
  }

  private async _triggerAdded(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index, data } = ev.detail;
    const item = ev.detail.item as HaAutomationTriggerRow;
    const selected = item.selected;

    let triggers = [
      ...this.triggers.slice(0, index),
      data,
      ...this.triggers.slice(index),
    ];
    // Add trigger locally to avoid UI jump
    this.triggers = triggers;
    if (selected) {
      this._focusTriggerIndexOnChange = triggers.length === 1 ? 0 : index;
    }
    await nextRender();
    if (this.triggers !== triggers) {
      // Ensure trigger is added even after update
      triggers = [
        ...this.triggers.slice(0, index),
        data,
        ...this.triggers.slice(index),
      ];
      if (selected) {
        this._focusTriggerIndexOnChange = triggers.length === 1 ? 0 : index;
      }
    }
    fireEvent(this, "value-changed", { value: triggers });
  }

  private async _triggerRemoved(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index } = ev.detail;
    const trigger = this.triggers[index];
    // Remove trigger locally to avoid UI jump
    this.triggers = this.triggers.filter((t) => t !== trigger);
    await nextRender();
    // Ensure trigger is removed even after update
    const triggers = this.triggers.filter((t) => t !== trigger);
    fireEvent(this, "value-changed", { value: triggers });
  }

  private _triggerChanged(ev: CustomEvent) {
    ev.stopPropagation();
    const triggers = [...this.triggers];
    const newValue = ev.detail.value;
    const index = (ev.target as any).index;

    if (newValue === null) {
      triggers.splice(index, 1);
    } else {
      // Store key on new value.
      const key = this._getKey(triggers[index]);
      this._triggerKeys.set(newValue, key);

      triggers[index] = newValue;
    }

    fireEvent(this, "value-changed", { value: triggers });
  }

  private _duplicateTrigger(ev: CustomEvent) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
    fireEvent(this, "value-changed", {
      // @ts-expect-error Requires library bump to ES2023
      value: this.triggers.toSpliced(
        index + 1,
        0,
        deepClone(this.triggers[index])
      ),
    });
  }

  private _insertAfter(ev: CustomEvent) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
    const inserted = ensureArray(ev.detail.value);
    this.highlightedTriggers = inserted;
    fireEvent(this, "value-changed", {
      // @ts-expect-error Requires library bump to ES2023
      value: this.triggers.toSpliced(index + 1, 0, ...inserted),
    });
  }

  private _handleDragKeydown(ev: KeyboardEvent) {
    if (ev.key === "Enter" || ev.key === " ") {
      ev.stopPropagation();
      this._rowSortSelected =
        this._rowSortSelected === undefined
          ? (ev.target as any).index
          : undefined;
    }
  }

  private _stopSortSelection() {
    this._rowSortSelected = undefined;
  }

  static styles = automationRowsStyles;
}

declare global {
  interface HTMLElementTagNameMap {
    "ha-automation-trigger": HaAutomationTrigger;
  }
}
