import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-dialog";
import "../../components/ha-dialog-footer";
import "../../components/ha-formfield";
import "../../components/ha-switch";
import "../../components/ha-button";
import type { HaSwitch } from "../../components/ha-switch";
import type { ConfigEntryMutableParams } from "../../data/config_entries";
import { updateConfigEntry } from "../../data/config_entries";
import { DirtyStateProviderMixin } from "../../mixins/dirty-state-provider-mixin";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import { showAlertDialog } from "../generic/show-dialog-box";
import type { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";

interface SystemOptionsState {
  disableNewEntities: boolean;
  disablePolling: boolean;
}

@customElement("dialog-config-entry-system-options")
class DialogConfigEntrySystemOptions extends DirtyStateProviderMixin<SystemOptionsState>()(
  LitElement
) {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _disableNewEntities!: boolean;

  @state() private _disablePolling!: boolean;

  @state() private _error?: string;

  @state() private _params?: ConfigEntrySystemOptionsDialogParams;

  @state() private _submitting = false;

  @state() private _open = false;

  public async showDialog(
    params: ConfigEntrySystemOptionsDialogParams
  ): Promise<void> {
    this._params = params;
    this._error = undefined;
    this._disableNewEntities = params.entry.pref_disable_new_entities;
    this._disablePolling = params.entry.pref_disable_polling;
    this._initDirtyTracking(
      { type: "shallow" },
      {
        disableNewEntities: this._disableNewEntities,
        disablePolling: this._disablePolling,
      }
    );
    this._open = true;
  }

  public closeDialog(): void {
    this._open = false;
  }

  private _dialogClosed(): void {
    this._error = "";
    this._params = undefined;
    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

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

    return html`
      <ha-dialog
        .open=${this._open}
        header-title=${this.hass.localize(
          "ui.dialogs.config_entry_system_options.title",
          {
            integration:
              this.hass.localize(
                `component.${this._params.entry.domain}.title`
              ) || this._params.entry.domain,
          }
        )}
        .preventScrimClose=${this.isDirtyState}
        @closed=${this._dialogClosed}
      >
        ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
        <ha-formfield
          .label=${html`<p>
              ${this.hass.localize(
                "ui.dialogs.config_entry_system_options.enable_new_entities_label"
              )}
            </p>
            <p class="secondary">
              ${this.hass.localize(
                "ui.dialogs.config_entry_system_options.enable_new_entities_description",
                {
                  integration:
                    this.hass.localize(
                      `component.${this._params.entry.domain}.title`
                    ) || this._params.entry.domain,
                }
              )}
            </p>`}
        >
          <ha-switch
            autofocus
            .checked=${!this._disableNewEntities}
            @change=${this._disableNewEntitiesChanged}
            .disabled=${this._submitting}
          ></ha-switch>
        </ha-formfield>

        <ha-formfield
          .label=${html`<p>
              ${this.hass.localize(
                "ui.dialogs.config_entry_system_options.enable_polling_label"
              )}
            </p>
            <p class="secondary">
              ${this.hass.localize(
                "ui.dialogs.config_entry_system_options.enable_polling_description",
                {
                  integration:
                    this.hass.localize(
                      `component.${this._params.entry.domain}.title`
                    ) || this._params.entry.domain,
                }
              )}
            </p>`}
        >
          <ha-switch
            .checked=${!this._disablePolling}
            @change=${this._disablePollingChanged}
            .disabled=${this._submitting}
          ></ha-switch>
        </ha-formfield>

        <ha-dialog-footer slot="footer">
          <ha-button
            appearance="plain"
            slot="secondaryAction"
            @click=${this.closeDialog}
            .disabled=${this._submitting}
          >
            ${this.hass.localize("ui.common.cancel")}
          </ha-button>
          <ha-button
            slot="primaryAction"
            @click=${this._updateEntry}
            .disabled=${this._submitting || !this.isDirtyState}
          >
            ${this.hass.localize(
              "ui.dialogs.config_entry_system_options.update"
            )}
          </ha-button>
        </ha-dialog-footer>
      </ha-dialog>
    `;
  }

  private _disableNewEntitiesChanged(ev: Event): void {
    this._error = undefined;
    this._disableNewEntities = !(ev.target as HaSwitch).checked;
    this._updateDirtyState({
      disableNewEntities: this._disableNewEntities,
      disablePolling: this._disablePolling,
    });
  }

  private _disablePollingChanged(ev: Event): void {
    this._error = undefined;
    this._disablePolling = !(ev.target as HaSwitch).checked;
    this._updateDirtyState({
      disableNewEntities: this._disableNewEntities,
      disablePolling: this._disablePolling,
    });
  }

  private async _updateEntry(): Promise<void> {
    this._submitting = true;
    const data: ConfigEntryMutableParams = {
      pref_disable_new_entities: this._disableNewEntities,
    };
    data.pref_disable_polling = this._disablePolling;
    try {
      const result = await updateConfigEntry(
        this.hass,
        this._params!.entry.entry_id,
        data
      );
      if (result.require_restart) {
        await showAlertDialog(this, {
          text: this.hass.localize(
            "ui.dialogs.config_entry_system_options.restart_home_assistant"
          ),
        });
      }
      this.closeDialog();
    } catch (err: any) {
      this._error = err.message || "Unknown error";
    } finally {
      this._submitting = false;
    }
  }

  static get styles(): CSSResultGroup {
    return [
      haStyleDialog,
      css`
        .error {
          color: var(--error-color);
        }
      `,
    ];
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "dialog-config-entry-system-options": DialogConfigEntrySystemOptions;
  }
}
