import { mdiCalendarSync, mdiGestureTap } from "@mdi/js";
import type { CSSResultGroup } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-dialog";
import "../../../../components/ha-icon-next";
import "../../../../components/ha-svg-icon";
import "../../../../components/item/ha-list-item-button";
import "../../../../components/list/ha-list-base";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import type { NewBackupDialogParams } from "./show-dialog-new-backup";

@customElement("ha-dialog-new-backup")
class DialogNewBackup extends LitElement implements HassDialog {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _opened = false;

  @state() private _params?: NewBackupDialogParams;

  public showDialog(params: NewBackupDialogParams): void {
    this._opened = true;
    this._params = params;
  }

  public closeDialog() {
    this._opened = false;
    return true;
  }

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

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

    return html`
      <ha-dialog
        .open=${this._opened}
        header-title=${this.hass.localize(
          "ui.panel.config.backup.dialogs.new.title"
        )}
        @closed=${this._dialogClosed}
      >
        <ha-list-base
          innerRole="listbox"
          itemRoles="option"
          .innerAriaLabel=${this.hass.localize(
            "ui.panel.config.backup.dialogs.new.options"
          )}
          rootTabbable
        >
          <ha-list-item-button
            @click=${this._automatic}
            .disabled=${!this._params.config.create_backup.password}
          >
            <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
            <span slot="headline">
              ${this.hass.localize(
                "ui.panel.config.backup.dialogs.new.automatic.title"
              )}
            </span>
            <span slot="supporting-text">
              ${this.hass.localize(
                "ui.panel.config.backup.dialogs.new.automatic.description"
              )}
            </span>
            <ha-icon-next slot="end"></ha-icon-next>
          </ha-list-item-button>
          <ha-list-item-button @click=${this._manual}>
            <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
            <span slot="headline">
              ${this.hass.localize(
                "ui.panel.config.backup.dialogs.new.manual.title"
              )}
            </span>
            <span slot="supporting-text">
              ${this.hass.localize(
                "ui.panel.config.backup.dialogs.new.manual.description"
              )}
            </span>
            <ha-icon-next slot="end"></ha-icon-next>
          </ha-list-item-button>
        </ha-list-base>
      </ha-dialog>
    `;
  }

  private async _manual() {
    this._params!.submit?.("manual");
    this.closeDialog();
  }

  private async _automatic() {
    this._params!.submit?.("automatic");
    this.closeDialog();
  }

  static get styles(): CSSResultGroup {
    return [
      haStyle,
      haStyleDialog,
      css`
        ha-dialog {
          --dialog-content-padding: 0;
        }
        ha-icon-next {
          width: 24px;
        }
      `,
    ];
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "ha-dialog-new-backup": DialogNewBackup;
  }
}
