import "@home-assistant/webawesome/dist/components/divider/divider";
import { consume } from "@lit/context";
import {
  mdiAppleKeyboardCommand,
  mdiArrowDown,
  mdiArrowUp,
  mdiCommentEditOutline,
  mdiCommentTextOutline,
  mdiContentCopy,
  mdiContentCut,
  mdiContentPaste,
  mdiDelete,
  mdiDotsVertical,
  mdiFlask,
  mdiPlayCircleOutline,
  mdiPlaylistEdit,
  mdiPlusCircleMultipleOutline,
  mdiRenameBox,
  mdiStopCircleOutline,
} from "@mdi/js";
import deepClone from "deep-clone-simple";
import type { HassServiceTarget } from "home-assistant-js-websocket";
import { dump } from "js-yaml";
import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
import { LitElement, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
import { ensureArray } from "../../../../common/array/ensure-array";
import { storage } from "../../../../common/decorators/storage";
import { fireEvent } from "../../../../common/dom/fire_event";
import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
import { stopPropagation } from "../../../../common/dom/stop_propagation";
import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
import { truncateWithEllipsis } from "../../../../common/string/truncate-with-ellipsis";
import { handleStructError } from "../../../../common/structs/handle-errors";
import { copyToClipboard } from "../../../../common/util/copy-clipboard";
import "../../../../components/automation/ha-automation-row";
import type { HaAutomationRow } from "../../../../components/automation/ha-automation-row";
import "../../../../components/automation/ha-automation-condition-live-test";
import "../../../../components/automation/ha-automation-row-event-chip";
import "../../../../components/ha-alert";
import "../../../../components/ha-card";
import "../../../../components/ha-condition-icon";
import "../../../../components/ha-dropdown";
import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
import "../../../../components/ha-dropdown-item";
import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-tooltip";
import type {
  AutomationClipboard,
  Condition,
  ConditionSidebarConfig,
  PlatformCondition,
} from "../../../../data/automation";
import { isCondition, testCondition } from "../../../../data/automation";
import { describeCondition } from "../../../../data/automation_i18n";
import type { ConditionDescriptions } from "../../../../data/condition";
import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
import {
  validateConfig,
  type InvalidConfig,
  type ValidConfig,
} from "../../../../data/config";
import { fullEntitiesContext } from "../../../../data/context";
import type { DeviceCondition } from "../../../../data/device/device_automation";
import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
import type { TargetSelector } from "../../../../data/selector";
import {
  showAlertDialog,
  showPromptDialog,
} from "../../../../dialogs/generic/show-dialog-box";
import type { HomeAssistant } from "../../../../types";
import { isMac } from "../../../../util/is_mac";
import { showEditorToast } from "../editor-toast";
import "../ha-automation-editor-warning";
import { overflowStyles, rowStyles } from "../styles";
import "../target/ha-automation-row-targets";
import "./ha-automation-condition-editor";
import type HaAutomationConditionEditor from "./ha-automation-condition-editor";
import "./types/ha-automation-condition-and";
import "./types/ha-automation-condition-device";
import "./types/ha-automation-condition-not";
import "./types/ha-automation-condition-numeric_state";
import "./types/ha-automation-condition-or";
import "./types/ha-automation-condition-state";
import "./types/ha-automation-condition-sun";
import "./types/ha-automation-condition-template";
import "./types/ha-automation-condition-time";
import "./types/ha-automation-condition-trigger";
import "./types/ha-automation-condition-zone";

export interface ConditionElement extends LitElement {
  condition: Condition;
  expandAll?: () => void;
  collapseAll?: () => void;
}

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

  @property({ attribute: false }) public condition!: Condition;

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

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

  @property({ type: Boolean }) public first?: boolean;

  @property({ type: Boolean }) public last?: boolean;

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

  @property({ type: Boolean }) public highlight?: boolean;

  @property({ type: Boolean, attribute: "sort-selected" })
  public sortSelected = false;

  @state() private _collapsed = true;

  @state() private _isNew = false;

  @state() private _warnings?: string[];

  @property({ attribute: false })
  public conditionDescriptions: ConditionDescriptions = {};

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

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

  @state() private _yamlMode = false;

  @state() private _testing = false;

  @state() private _testingResult?: boolean;

  @state() private _selected = false;

  @state()
  @consume({ context: fullEntitiesContext, subscribe: true })
  _entityReg: EntityRegistryEntry[] = [];

  @query("ha-automation-condition-editor")
  public conditionEditor?: HaAutomationConditionEditor;

  @query("ha-automation-row")
  private _automationRowElement?: HaAutomationRow;

  private _testingTimeout?: number;

  get selected() {
    return this._selected;
  }

  private _renderOverflowLabel(label: string, shortcut?: TemplateResult) {
    return html`
      <div class="overflow-label">
        ${label}
        ${
          this.optionsInSidebar && !this.narrow
            ? shortcut ||
              html`<span
                class="shortcut-placeholder ${isMac ? "mac" : ""}"
              ></span>`
            : nothing
        }
      </div>
    `;
  }

  private _renderRow() {
    const descriptionHasTarget =
      "target" in (this.conditionDescriptions[this.condition.condition] || {});

    const target = descriptionHasTarget
      ? (this.condition as PlatformCondition).target
      : "device_id" in this.condition &&
          (this.condition as DeviceCondition).device_id
        ? { device_id: [(this.condition as DeviceCondition).device_id] }
        : undefined;

    const conditionTargetSpec =
      this.conditionDescriptions[this.condition.condition]?.target;

    const noteTooltipText = truncateWithEllipsis(
      this.condition.note?.trim() || "",
      250
    );

    return html`
      ${
        this.optionsInSidebar && this.condition.condition !== "trigger"
          ? html`<ha-automation-condition-live-test
              id="condition-icon"
              slot="leading-icon"
              .hass=${this.hass}
              .condition=${this.condition}
            >
              <ha-condition-icon
                .hass=${this.hass}
                .condition=${this.condition.condition}
              ></ha-condition-icon>
            </ha-automation-condition-live-test>`
          : html`<div
              id="condition-icon"
              class="icon-badge-wrapper"
              slot="leading-icon"
            >
              <ha-condition-icon
                .hass=${this.hass}
                .condition=${this.condition.condition}
              ></ha-condition-icon>
            </div>`
      }
      <h3 slot="header">
        ${capitalizeFirstLetter(
          describeCondition(this.condition, this.hass, this._entityReg)
        )}
        ${
          target !== undefined || (descriptionHasTarget && !this._isNew)
            ? this._renderTargets(
                target,
                descriptionHasTarget && !this._isNew,
                conditionTargetSpec,
                this.condition.condition !== "device"
              )
            : nothing
        }
        ${
          this.condition.note?.trim()
            ? html`
                <ha-svg-icon
                  id="note-icon"
                  tabindex="0"
                  .path=${mdiCommentTextOutline}
                  .label=${this.hass.localize(
                    "ui.panel.config.automation.editor.note.label"
                  )}
                  class="note-indicator"
                ></ha-svg-icon>
                <ha-tooltip for="note-icon"
                  ><p>${noteTooltipText}</p></ha-tooltip
                >
              `
            : nothing
        }
      </h3>
      <ha-automation-row-event-chip
        .show=${this._testing}
        .variant=${this._testingResult ? "success" : "warning"}
        slot="event"
        class="event-chip"
        aria-live="polite"
      >
        ${this.hass.localize(
          `ui.panel.config.automation.editor.conditions.testing_${
            this._testingResult ? "pass" : "error"
          }`
        )}
      </ha-automation-row-event-chip>

      <slot name="icons" slot="icons"></slot>

      <ha-dropdown
        slot="icons"
        @click=${preventDefaultStopPropagation}
        @keydown=${stopPropagation}
        @wa-select=${this._handleDropdownSelect}
        placement="bottom-end"
      >
        <ha-icon-button
          slot="trigger"
          .label=${this.hass.localize("ui.common.menu")}
          .path=${mdiDotsVertical}
        >
        </ha-icon-button>

        <ha-dropdown-item value="test">
          <ha-svg-icon slot="icon" .path=${mdiFlask}></ha-svg-icon>
          ${this._renderOverflowLabel(
            this.hass.localize(
              "ui.panel.config.automation.editor.conditions.test"
            )
          )}
        </ha-dropdown-item>
        <ha-dropdown-item value="rename" .disabled=${this.disabled}>
          <ha-svg-icon slot="icon" .path=${mdiRenameBox}></ha-svg-icon>
          ${this._renderOverflowLabel(
            this.hass.localize(
              "ui.panel.config.automation.editor.conditions.rename"
            )
          )}
        </ha-dropdown-item>
        <ha-dropdown-item value="edit_note">
          <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
          ${this._renderOverflowLabel(
            this.hass.localize(
              `ui.panel.config.automation.editor.note.${this.condition.note ? "edit" : "add"}`
            )
          )}
        </ha-dropdown-item>

        <wa-divider></wa-divider>

        <ha-dropdown-item value="duplicate" .disabled=${this.disabled}>
          <ha-svg-icon
            slot="icon"
            .path=${mdiPlusCircleMultipleOutline}
          ></ha-svg-icon>
          ${this._renderOverflowLabel(
            this.hass.localize(
              "ui.panel.config.automation.editor.actions.duplicate"
            )
          )}
        </ha-dropdown-item>

        <ha-dropdown-item value="copy" .disabled=${this.disabled}>
          <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon
          >${this._renderOverflowLabel(
            this.hass.localize(
              "ui.panel.config.automation.editor.triggers.copy"
            ),
            html`<span class="shortcut">
              <span
                >${
                  isMac
                    ? html`<ha-svg-icon
                        .path=${mdiAppleKeyboardCommand}
                      ></ha-svg-icon>`
                    : this.hass.localize(
                        "ui.panel.config.automation.editor.ctrl"
                      )
                }</span
              >
              <span>+</span>
              <span>C</span>
            </span>`
          )}
        </ha-dropdown-item>

        <ha-dropdown-item value="cut" .disabled=${this.disabled}>
          <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon
          >${this._renderOverflowLabel(
            this.hass.localize(
              "ui.panel.config.automation.editor.triggers.cut"
            ),
            html`<span class="shortcut">
              <span
                >${
                  isMac
                    ? html`<ha-svg-icon
                        .path=${mdiAppleKeyboardCommand}
                      ></ha-svg-icon>`
                    : this.hass.localize(
                        "ui.panel.config.automation.editor.ctrl"
                      )
                }</span
              >
              <span>+</span>
              <span>X</span>
            </span>`
          )}
        </ha-dropdown-item>

        ${
          this._pasteAvailable()
            ? html`
                <ha-dropdown-item value="paste">
                  <ha-svg-icon
                    slot="icon"
                    .path=${mdiContentPaste}
                  ></ha-svg-icon>
                  ${this._renderOverflowLabel(
                    this.hass.localize(
                      "ui.panel.config.automation.editor.actions.paste"
                    ),
                    html`<span class="shortcut">
                      <span
                        >${
                          isMac
                            ? html`<ha-svg-icon
                                .path=${mdiAppleKeyboardCommand}
                              ></ha-svg-icon>`
                            : this.hass.localize(
                                "ui.panel.config.automation.editor.ctrl"
                              )
                        }</span
                      >
                      <span>+</span>
                      <span>V</span>
                    </span>`
                  )}
                </ha-dropdown-item>
              `
            : nothing
        }
        ${
          !this.optionsInSidebar
            ? html`
                <ha-dropdown-item
                  value="move_up"
                  .disabled=${this.disabled || !!this.first}
                >
                  ${this.hass.localize(
                    "ui.panel.config.automation.editor.move_up"
                  )}
                  <ha-svg-icon slot="icon" .path=${mdiArrowUp}></ha-svg-icon
                ></ha-dropdown-item>
                <ha-dropdown-item
                  value="move_down"
                  .disabled=${this.disabled || !!this.last}
                >
                  ${this.hass.localize(
                    "ui.panel.config.automation.editor.move_down"
                  )}
                  <ha-svg-icon slot="icon" .path=${mdiArrowDown}></ha-svg-icon
                ></ha-dropdown-item>
              `
            : nothing
        }

        <ha-dropdown-item value="toggle_yaml_mode">
          <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
          ${this._renderOverflowLabel(
            this.hass.localize(
              `ui.panel.config.automation.editor.edit_${!this._yamlMode ? "yaml" : "ui"}`
            )
          )}
        </ha-dropdown-item>

        <wa-divider></wa-divider>

        <ha-dropdown-item value="disable" .disabled=${this.disabled}>
          <ha-svg-icon
            slot="icon"
            .path=${
              this.condition.enabled === false
                ? mdiPlayCircleOutline
                : mdiStopCircleOutline
            }
          ></ha-svg-icon>

          ${this._renderOverflowLabel(
            this.hass.localize(
              `ui.panel.config.automation.editor.actions.${this.condition.enabled === false ? "enable" : "disable"}`
            )
          )}
        </ha-dropdown-item>
        <ha-dropdown-item
          variant="danger"
          value="delete"
          .disabled=${this.disabled}
        >
          <ha-svg-icon
            class="warning"
            slot="icon"
            .path=${mdiDelete}
          ></ha-svg-icon>
          ${this._renderOverflowLabel(
            this.hass.localize(
              "ui.panel.config.automation.editor.actions.delete"
            ),
            html`<span class="shortcut">
              <span
                >${
                  isMac
                    ? html`<ha-svg-icon
                        .path=${mdiAppleKeyboardCommand}
                      ></ha-svg-icon>`
                    : this.hass.localize(
                        "ui.panel.config.automation.editor.ctrl"
                      )
                }</span
              >
              <span>+</span>
              <span
                >${this.hass.localize(
                  "ui.panel.config.automation.editor.del"
                )}</span
              >
            </span>`
          )}
        </ha-dropdown-item>
      </ha-dropdown>
      ${
        !this.optionsInSidebar
          ? html`${
                this._warnings
                  ? html`<ha-automation-editor-warning
                      .localize=${this.hass.localize}
                      .warnings=${this._warnings}
                    >
                    </ha-automation-editor-warning>`
                  : nothing
              }
              <ha-automation-condition-editor
                .hass=${this.hass}
                .condition=${this.condition}
                .description=${
                  this.conditionDescriptions[this.condition.condition]
                }
                .disabled=${this.disabled}
                .yamlMode=${this._yamlMode}
                .uiSupported=${this._uiSupported(
                  this._getType(this.condition, this.conditionDescriptions)
                )}
                .narrow=${this.narrow}
                @ui-mode-not-available=${this._handleUiModeNotAvailable}
              ></ha-automation-condition-editor>`
          : nothing
      }
    `;
  }

  protected render() {
    if (!this.condition) {
      return nothing;
    }

    return html`
      <ha-card
        outlined
        class=${classMap({
          selected: this._selected,
          "building-block":
            this.optionsInSidebar &&
            CONDITION_BUILDING_BLOCKS.includes(this.condition.condition) &&
            !this._collapsed,
        })}
      >
        ${
          this.condition.enabled === false
            ? html`
                <div class="disabled-bar">
                  ${this.hass.localize(
                    "ui.panel.config.automation.editor.actions.disabled"
                  )}
                </div>
              `
            : nothing
        }
        ${
          this.optionsInSidebar
            ? html`<ha-automation-row
                .disabled=${this.condition.enabled === false}
                .leftChevron=${CONDITION_BUILDING_BLOCKS.includes(
                  this.condition.condition
                )}
                .collapsed=${this._collapsed}
                .selected=${this._selected}
                .highlight=${this.highlight}
                .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes(
                  this.condition.condition
                )}
                .sortSelected=${this.sortSelected}
                .dim=${this._testing}
                @click=${this._toggleSidebar}
                @toggle-collapsed=${this._toggleCollapse}
                >${this._renderRow()}
              </ha-automation-row>`
            : html`
                <ha-expansion-panel
                  left-chevron
                  @expanded-changed=${this._expansionPanelChanged}
                >
                  ${this._renderRow()}
                </ha-expansion-panel>
              `
        }
      </ha-card>

      ${
        this.optionsInSidebar &&
        CONDITION_BUILDING_BLOCKS.includes(this.condition.condition)
          ? html`<ha-automation-condition-editor
              class=${this._collapsed ? "hidden" : ""}
              .hass=${this.hass}
              .condition=${this.condition}
              .disabled=${this.disabled}
              .uiSupported=${this._uiSupported(
                this._getType(this.condition, this.conditionDescriptions)
              )}
              indent
              .selected=${this._selected}
              .narrow=${this.narrow}
              @value-changed=${this._onValueChange}
            ></ha-automation-condition-editor>`
          : nothing
      }
    `;
  }

  private _renderTargets = memoizeOne(
    (
      target?: HassServiceTarget,
      targetRequired = false,
      targetSpec?: TargetSelector["target"],
      interactive = false
    ) =>
      html`<ha-automation-row-targets
        .target=${target}
        .targetRequired=${targetRequired}
        .selector=${targetSpec ? { target: targetSpec } : undefined}
        .interactive=${interactive}
      ></ha-automation-row-targets>`
  );

  protected firstUpdated(changedProperties: PropertyValues<this>): void {
    super.firstUpdated(changedProperties);

    if (this.root) {
      this._collapsed = false;
    }
  }

  protected willUpdate(changedProperties: PropertyValues) {
    // on yaml toggle --> clear warnings
    if (changedProperties.has("yamlMode")) {
      this._warnings = undefined;
    }
  }

  public disconnectedCallback() {
    super.disconnectedCallback();
    if (this._testingTimeout !== undefined) {
      clearTimeout(this._testingTimeout);
    }
  }

  private _onValueChange(event: CustomEvent) {
    // reload sidebar if sort, deleted,... happend
    if (this._selected && this.optionsInSidebar) {
      this.openSidebar(event.detail.value);
    }
  }

  private _setClipboard() {
    this._clipboard = {
      ...this._clipboard,
      condition: deepClone(this.condition),
    };
    copyToClipboard(dump(this.condition));
  }

  private _onDisable = () => {
    const enabled = !(this.condition.enabled ?? true);
    const value = { ...this.condition, enabled };
    fireEvent(this, "value-changed", { value });

    if (this._selected && this.optionsInSidebar) {
      this.openSidebar(value); // refresh sidebar
    }

    if (this._yamlMode && !this.optionsInSidebar) {
      this.conditionEditor?.yamlEditor?.setValue(value);
    }
  };

  private _onDelete = () => {
    fireEvent(this, "value-changed", { value: null });
    if (this._selected) {
      fireEvent(this, "close-sidebar");
    }

    showEditorToast(this, {
      message: this.hass.localize("ui.common.successfully_deleted"),
      duration: 4000,
      action: {
        text: this.hass.localize("ui.common.undo"),
        action: () => {
          fireEvent(window, "undo-change");
        },
      },
    });
  };

  private _switchUiMode() {
    this._yamlMode = false;
  }

  private _switchYamlMode() {
    this._yamlMode = true;
  }

  private _testCondition = async () => {
    if (this._testing && this._testingTimeout === undefined) {
      return;
    }

    if (this._testingTimeout !== undefined) {
      clearTimeout(this._testingTimeout);
    }

    const condition = this.condition;
    requestAnimationFrame(() => {
      // @ts-ignore is supported in all browsers except firefox
      if (this.scrollIntoViewIfNeeded) {
        // @ts-ignore is supported in all browsers except firefox
        this.scrollIntoViewIfNeeded();
        return;
      }
      this.scrollIntoView();
    });

    let validateResult: Record<"conditions", InvalidConfig | ValidConfig>;
    try {
      validateResult = await validateConfig(this.hass, {
        conditions: condition,
      });
    } catch (err: any) {
      showAlertDialog(this, {
        title: this.hass.localize(
          "ui.panel.config.automation.editor.conditions.validation_failed"
        ),
      });
      // eslint-disable-next-line no-console
      console.error("Error validating condition", err);
      return;
    }

    // Abort if condition changed.
    if (this.condition !== condition) {
      return;
    }

    if (!validateResult.conditions.valid) {
      showAlertDialog(this, {
        title: this.hass.localize(
          "ui.panel.config.automation.editor.conditions.invalid_condition"
        ),
        text: validateResult.conditions.error,
      });
      return;
    }

    let result: { result: boolean };
    try {
      result = await testCondition(this.hass, condition);
    } catch (err: any) {
      if (this.condition !== condition) {
        return;
      }

      showAlertDialog(this, {
        title: this.hass.localize(
          "ui.panel.config.automation.editor.conditions.test_failed"
        ),
        text: err.message,
      });
      return;
    }

    this._testingResult = result.result;
    this._testing = true;
    this._testingTimeout = window.setTimeout(() => {
      this._testing = false;
    }, 2500);
  };

  private _renameCondition = async (): Promise<void> => {
    const alias = await showPromptDialog(this, {
      title: this.hass.localize(
        "ui.panel.config.automation.editor.conditions.change_alias"
      ),
      inputLabel: this.hass.localize(
        "ui.panel.config.automation.editor.conditions.alias"
      ),
      inputType: "string",
      placeholder: capitalizeFirstLetter(
        describeCondition(this.condition, this.hass, this._entityReg, true)
      ),
      defaultValue: this.condition.alias,
      confirmText: this.hass.localize("ui.common.submit"),
    });
    if (alias !== null) {
      const value = { ...this.condition };
      if (alias === "") {
        delete value.alias;
      } else {
        value.alias = alias;
      }
      fireEvent(this, "value-changed", {
        value,
      });

      if (this._selected && this.optionsInSidebar) {
        this.openSidebar(value); // refresh sidebar
      } else if (this._yamlMode) {
        this.conditionEditor?.yamlEditor?.setValue(value);
      }
    }
  };

  private _editNoteCondition = async (): Promise<void> => {
    const note = await showPromptDialog(this, {
      title: this.hass.localize(
        `ui.panel.config.automation.editor.note.${this.condition.note ? "edit" : "add"}`
      ),
      inputLabel: this.hass.localize(
        "ui.panel.config.automation.editor.note.label"
      ),
      inputType: "string",
      defaultValue: this.condition.note,
      confirmText: this.hass.localize("ui.common.submit"),
      multiline: true,
    });
    if (note !== null) {
      const value = { ...this.condition };
      if (note === "") {
        delete value.note;
      } else {
        value.note = note;
      }
      fireEvent(this, "value-changed", {
        value,
      });

      if (this._selected && this.optionsInSidebar) {
        this.openSidebar(value); // refresh sidebar
      } else if (this._yamlMode) {
        this.conditionEditor?.yamlEditor?.setValue(value);
      }
    }
  };

  private _duplicateCondition = () => {
    fireEvent(this, "duplicate");
  };

  private _insertAfter = (value: Condition | Condition[]) => {
    if (ensureArray(value).some((val) => !isCondition(val))) {
      return false;
    }
    fireEvent(this, "insert-after", { value });
    return true;
  };

  private _copyCondition = () => {
    this._setClipboard();
    if (this._selected && this.optionsInSidebar) {
      this.openSidebar(); // refresh sidebar
    }
    showEditorToast(this, {
      message: this.hass.localize(
        "ui.panel.config.automation.editor.conditions.copied_to_clipboard"
      ),
      duration: 2000,
    });
  };

  private _cutCondition = () => {
    this._setClipboard();
    fireEvent(this, "value-changed", { value: null });
    if (this._selected) {
      fireEvent(this, "close-sidebar");
    }
    showEditorToast(this, {
      message: this.hass.localize(
        "ui.panel.config.automation.editor.conditions.cut_to_clipboard"
      ),
      duration: 2000,
    });
  };

  private _pasteCondition = () => {
    const condition = this._clipboard?.condition;
    if (!condition) return;

    fireEvent(this, "paste", { item: condition });
  };

  private _pasteAvailable = () => !!this._clipboard?.condition;

  private _moveUp = () => {
    fireEvent(this, "move-up");
  };

  private _moveDown = () => {
    fireEvent(this, "move-down");
  };

  private _toggleYamlMode = (item?: HTMLElement) => {
    if (this._yamlMode) {
      this._switchUiMode();
    } else {
      this._switchYamlMode();
    }

    if (!this.optionsInSidebar) {
      this.expand();
    } else if (item) {
      this.openSidebar();
    }
  };

  public expand() {
    if (this.optionsInSidebar) {
      this._collapsed = false;
      return;
    }

    this.updateComplete.then(() => {
      this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;
    });
  }

  public collapse() {
    this._collapsed = true;
  }

  public expandAll() {
    this.expand();

    this.conditionEditor?.expandAll();
  }

  public collapseAll() {
    this.collapse();

    this.conditionEditor?.collapseAll();
  }

  private _handleUiModeNotAvailable(ev: CustomEvent) {
    this._warnings = handleStructError(this.hass, ev.detail).warnings;
    if (!this._yamlMode) {
      this._yamlMode = true;
    }
  }

  private _toggleSidebar(ev: Event) {
    ev?.stopPropagation();

    if (this._selected) {
      fireEvent(this, "request-close-sidebar");
      return;
    }
    this.openSidebar();
  }

  public markAsNew(): void {
    this._isNew = true;
  }

  private _expansionPanelChanged(ev: CustomEvent) {
    if (!ev.detail.expanded) {
      this._isNew = false;
    }
  }

  public openSidebar(condition?: Condition): void {
    const sidebarCondition = condition || this.condition;
    fireEvent(this, "open-sidebar", {
      save: (value) => {
        fireEvent(this, "value-changed", { value });
      },
      close: (focus?: boolean) => {
        this._selected = false;
        this._isNew = false;
        fireEvent(this, "close-sidebar");
        if (focus) {
          this.focus();
        }
      },
      rename: () => {
        this._renameCondition();
      },
      editNote: this._editNoteCondition,
      toggleYamlMode: () => {
        this._toggleYamlMode();
        this.openSidebar();
      },
      disable: this._onDisable,
      delete: this._onDelete,
      duplicate: this._duplicateCondition,
      insertAfter: this._insertAfter,
      copy: this._copyCondition,
      cut: this._cutCondition,
      paste: this._pasteCondition,
      pasteAvailable: this._pasteAvailable,
      test: this._testCondition,
      config: sidebarCondition,
      uiSupported: this._uiSupported(
        this._getType(sidebarCondition, this.conditionDescriptions)
      ),
      description: this.conditionDescriptions[sidebarCondition.condition],
      yamlMode: this._yamlMode,
    } satisfies ConditionSidebarConfig);
    this._selected = true;
    this._collapsed = false;

    if (this.narrow) {
      window.setTimeout(() => {
        this.scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
      }, 180); // duration of transition of added padding for bottom sheet
    }
  }

  private _getType = memoizeOne(
    (condition: Condition, conditionDescriptions: ConditionDescriptions) => {
      if (condition.condition in conditionDescriptions) {
        return "platform";
      }

      return condition.condition;
    }
  );

  private _uiSupported = memoizeOne(
    (type: string) =>
      customElements.get(`ha-automation-condition-${type}`) !== undefined
  );

  private _toggleCollapse() {
    this._collapsed = !this._collapsed;
  }

  public focus() {
    this._automationRowElement?.focus();
  }

  private _handleDropdownSelect(ev: HaDropdownSelectEvent) {
    ev.stopPropagation();
    const action = ev.detail?.item?.value;

    if (!action) {
      return;
    }

    switch (action) {
      case "test":
        this._testCondition();
        break;
      case "rename":
        this._renameCondition();
        break;
      case "edit_note":
        this._editNoteCondition();
        break;
      case "duplicate":
        this._duplicateCondition();
        break;
      case "copy":
        this._copyCondition();
        break;
      case "cut":
        this._cutCondition();
        break;
      case "paste":
        this._pasteCondition();
        break;
      case "move_up":
        this._moveUp();
        break;
      case "move_down":
        this._moveDown();
        break;
      case "toggle_yaml_mode":
        this._toggleYamlMode(ev.target as HTMLElement);
        break;
      case "disable":
        this._onDisable();
        break;
      case "delete":
        this._onDelete();
        break;
    }
  }

  static get styles(): CSSResultGroup {
    return [rowStyles, overflowStyles];
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "ha-automation-condition-row": HaAutomationConditionRow;
  }
}
