import { mdiAlertOutline, mdiClose } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-button";
import "../../components/ha-dialog";
import "../../components/ha-dialog-footer";
import "../../components/ha-dialog-header";
import "../../components/ha-svg-icon";
import "../../components/ha-textarea";
import type { HaTextArea } from "../../components/ha-textarea";
import "../../components/input/ha-input";
import type { HaInput } from "../../components/input/ha-input";
import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
import type { HomeAssistant } from "../../types";
import type { DialogBoxParams } from "./show-dialog-box";

interface DialogBoxDirtyState {
  value: string;
}

@customElement("dialog-box")
class DialogBox extends DirtyStateProviderMixin<DialogBoxDirtyState>()(
  LitElement
) {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _params?: DialogBoxParams;

  @state() private _open = false;

  @state() private _closeState?: "canceled" | "confirmed";

  @state() private _loading = false;

  @state() private _validInput = true;

  @query("ha-input, ha-textarea") private _textField?: HaInput | HaTextArea;

  private _closePromise?: Promise<void>;

  private _closeResolve?: () => void;

  public async showDialog(params: DialogBoxParams): Promise<void> {
    if (this._closePromise) {
      await this._closePromise;
    }
    this._params = params;
    this._validInput = true;
    this._open = true;
    this._initDirtyTracking(
      { type: "deep" },
      { value: params.defaultValue ?? "" }
    );
    await this.updateComplete;
    this._validateInput();
  }

  public closeDialog(): boolean {
    if (!this._open) {
      // Dialog is already closing
      return true;
    }
    if (this._params?.confirmation || this._params?.prompt) {
      return false;
    }
    if (this._params) {
      this._dismiss();
      return true;
    }
    return true;
  }

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

    const confirmPrompt = this._params.confirmation || !!this._params.prompt;
    const dialogTitle =
      this._params.title ||
      (this._params.confirmation &&
        this.hass.localize("ui.dialogs.generic.default_confirmation_title"));

    return html`
      <ha-dialog
        .open=${this._open}
        type=${confirmPrompt ? "alert" : "standard"}
        .preventScrimClose=${!!this._params.confirmation || this.isDirtyState}
        @closed=${this._dialogClosed}
        aria-labelledby="dialog-box-title"
        aria-describedby="dialog-box-description"
      >
        <ha-dialog-header slot="header">
          ${!confirmPrompt
            ? html`<slot name="headerNavigationIcon" slot="navigationIcon">
                <ha-icon-button
                  data-dialog="close"
                  .label=${this.hass?.localize("ui.common.close") ?? "Close"}
                  .path=${mdiClose}
                ></ha-icon-button
              ></slot>`
            : nothing}
          <h1
            class=${classMap({ title: true, alert: confirmPrompt })}
            slot="title"
            id="dialog-box-title"
          >
            ${this._params.warning
              ? html`<ha-svg-icon
                  .path=${mdiAlertOutline}
                  style="color: var(--warning-color)"
                ></ha-svg-icon> `
              : nothing}
            ${dialogTitle}
          </h1>
          ${this._params.subtitle
            ? html`<span slot="subtitle">${this._params.subtitle}</span>`
            : nothing}
        </ha-dialog-header>
        <div id="dialog-box-description">
          ${this._params.text ? html` <p>${this._params.text}</p> ` : ""}
          ${this._params.prompt && !this._params.multiline
            ? html`
                <ha-input
                  autofocus
                  value=${ifDefined(this._params.defaultValue)}
                  .placeholder=${this._params.placeholder}
                  .label=${this._params.inputLabel
                    ? this._params.inputLabel
                    : ""}
                  .type=${this._params.inputType
                    ? this._params.inputType
                    : "text"}
                  .min=${this._params.inputMin}
                  .max=${this._params.inputMax}
                  .disabled=${this._loading}
                  @input=${this._validateInput}
                >
                  ${this._params.inputSuffix
                    ? html`<span slot="end">${this._params.inputSuffix}</span>`
                    : nothing}
                </ha-input>
              `
            : this._params.prompt && this._params.multiline
              ? html`
                  <ha-textarea
                    resize="auto"
                    autofocus
                    .value=${this._params.defaultValue}
                    .placeholder=${this._params.placeholder}
                    .label=${this._params.inputLabel}
                    .disabled=${this._loading}
                    @input=${this._validateInput}
                  ></ha-textarea>
                `
              : nothing}
        </div>
        <ha-dialog-footer slot="footer">
          ${confirmPrompt
            ? html`
                <ha-button
                  slot="secondaryAction"
                  @click=${this._dismiss}
                  ?autofocus=${!this._params.prompt && this._params.destructive}
                  ?disabled=${this._loading}
                  appearance="plain"
                >
                  ${this._params.dismissText
                    ? this._params.dismissText
                    : this.hass.localize("ui.common.cancel")}
                </ha-button>
              `
            : nothing}
          <ha-button
            slot="primaryAction"
            @click=${this._confirm}
            ?autofocus=${!this._params.prompt && !this._params.destructive}
            ?disabled=${this._loading ||
            (!!this._params.prompt && !this._validInput)}
            .loading=${this._loading}
            variant=${this._params.destructive ? "danger" : "brand"}
          >
            ${this._params.confirmText
              ? this._params.confirmText
              : this.hass.localize("ui.common.ok")}
          </ha-button>
        </ha-dialog-footer>
      </ha-dialog>
    `;
  }

  private _cancel(): void {
    if (this._params?.cancel) {
      this._params.cancel();
    }
  }

  private _dismiss(): void {
    this._closeState = "canceled";
    this._cancel();
    this._closeDialog();
  }

  private async _confirm(): Promise<void> {
    if (this._params?.prompt && !this._textField?.reportValidity()) {
      return;
    }

    if (this._params!.action) {
      this._loading = true;
      try {
        await this._params!.action(this._textField?.value);
      } catch (_err) {
        this._loading = false;
        return;
      }
      this._loading = false;
    }
    this._closeState = "confirmed";
    if (this._params!.confirm) {
      this._params!.confirm(this._textField?.value);
    }
    this._markDirtyStateClean();
    this._closeDialog();
  }

  private _validateInput(): void {
    this._validInput = this._params?.prompt
      ? (this._textField?.checkValidity() ?? true)
      : true;
    if (this._params?.prompt) {
      this._updateDirtyState({ value: this._textField?.value ?? "" });
    }
  }

  private _closeDialog() {
    this._open = false;
    this._closePromise = new Promise((resolve) => {
      this._closeResolve = resolve;
    });
  }

  private _dialogClosed() {
    fireEvent(this, "dialog-closed", { dialog: this.localName });
    if (!this._closeState) {
      this._cancel();
    }
    this._closeState = undefined;
    this._params = undefined;
    this._open = false;
    this._loading = false;
    this._closeResolve?.();
    this._closeResolve = undefined;
  }

  static styles = css`
    :host([inert]) {
      pointer-events: initial !important;
      cursor: initial !important;
    }
    a {
      color: var(--primary-color);
    }
    p {
      margin: 0;
      color: var(--primary-text-color);
    }
    .no-bottom-padding {
      padding-bottom: 0;
    }
    .secondary {
      color: var(--secondary-text-color);
    }
    ha-input {
      width: 100%;
    }
    .title {
      font-weight: inherit;
      font-size: inherit;
      margin: inherit;
    }
    .title.alert {
      padding: 0 var(--ha-space-2);
    }
    @media all and (min-width: 450px) and (min-height: 500px) {
      .title.alert {
        padding: 0 var(--ha-space-1);
      }
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    "dialog-box": DialogBox;
  }
}
