import "@material/mwc-button/mwc-button";
import { mdiCheckCircle, mdiCircle, mdiCloseCircle, mdiZWave } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { navigate } from "../../../../../common/navigate";
import "../../../../../components/ha-card";
import "../../../../../components/ha-icon-next";
import {
  fetchOZWInstances,
  networkOfflineStatuses,
  networkOnlineStatuses,
  networkStartingStatuses,
  OZWInstance,
} from "../../../../../data/ozw";
import "../../../../../layouts/hass-error-screen";
import "../../../../../layouts/hass-loading-screen";
import "../../../../../layouts/hass-tabs-subpage";
import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
import { haStyle } from "../../../../../resources/styles";
import type { HomeAssistant, Route } from "../../../../../types";
import "../../../ha-config-section";
import "../../../../../components/ha-alert";

export const ozwTabs: PageNavigation[] = [];

@customElement("ozw-config-dashboard")
class OZWConfigDashboard extends LitElement {
  @property({ type: Object }) public hass!: HomeAssistant;

  @property({ type: Object }) public route!: Route;

  @property({ type: Boolean }) public narrow!: boolean;

  @property({ type: Boolean }) public isWide!: boolean;

  @property() public configEntryId?: string;

  @state() private _instances?: OZWInstance[];

  protected firstUpdated() {
    this._fetchData();
  }

  protected render(): TemplateResult {
    if (!this._instances) {
      return html`<hass-loading-screen></hass-loading-screen>`;
    }

    if (this._instances.length === 0) {
      return html`<hass-error-screen
        .hass=${this.hass}
        .error=${this.hass.localize(
          "ui.panel.config.ozw.select_instance.none_found"
        )}
      ></hass-error-screen>`;
    }

    return html`
      <hass-tabs-subpage
        .hass=${this.hass}
        .narrow=${this.narrow}
        .route=${this.route}
        .tabs=${ozwTabs}
        back-path="/config/integrations"
      >
        <ha-alert
          alert-type="warning"
          title="This integration will stop working soon"
        >
          The OpenZWave integration is deprecated and will no longer receive any
          updates. The technical dependencies will render this integration
          unusable in the near future. We strongly advise you to migrate to the
          new
          <a
            href="https://www.home-assistant.io/integrations/zwave_js"
            target="_blank"
            rel="noreferrer"
            >Z-Wave JS integration</a
          >.
          <a
            slot="action"
            href="https://alerts.home-assistant.io/#ozw.markdown"
            target="_blank"
            rel="noreferrer"
          >
            <mwc-button>learn more</mwc-button>
          </a>
        </ha-alert>

        <ha-config-section .narrow=${this.narrow} .isWide=${this.isWide}>
          <div slot="header">
            ${this.hass.localize("ui.panel.config.ozw.select_instance.header")}
          </div>

          <div slot="introduction">
            ${this.hass.localize(
              "ui.panel.config.ozw.select_instance.introduction"
            )}
          </div>
          ${this._instances.length > 0
            ? html`
                ${this._instances.map((instance) => {
                  let status = "unknown";
                  let icon = mdiCircle;
                  if (networkOnlineStatuses.includes(instance.Status)) {
                    status = "online";
                    icon = mdiCheckCircle;
                  }
                  if (networkStartingStatuses.includes(instance.Status)) {
                    status = "starting";
                  }
                  if (networkOfflineStatuses.includes(instance.Status)) {
                    status = "offline";
                    icon = mdiCloseCircle;
                  }

                  return html`
                    <ha-card>
                      <a
                        href="/config/ozw/network/${instance.ozw_instance}"
                        role="option"
                        tabindex="-1"
                      >
                        <paper-icon-item>
                          <ha-svg-icon .path=${mdiZWave} slot="item-icon">
                          </ha-svg-icon>
                          <paper-item-body>
                            ${this.hass.localize(
                              "ui.panel.config.ozw.common.instance"
                            )}
                            ${instance.ozw_instance}
                            <div secondary>
                              <ha-svg-icon
                                .path=${icon}
                                class="network-status-icon ${status}"
                              ></ha-svg-icon>
                              ${this.hass.localize(
                                "ui.panel.config.ozw.network_status." + status
                              )}
                              -
                              ${this.hass.localize(
                                "ui.panel.config.ozw.network_status.details." +
                                  instance.Status.toLowerCase()
                              )}<br />
                              ${this.hass.localize(
                                "ui.panel.config.ozw.common.controller"
                              )}
                              : ${instance.getControllerPath}<br />
                              OZWDaemon ${instance.OZWDaemon_Version} (OpenZWave
                              ${instance.OpenZWave_Version})
                            </div>
                          </paper-item-body>
                          <ha-icon-next></ha-icon-next>
                        </paper-icon-item>
                      </a>
                    </ha-card>
                  `;
                })}
              `
            : ""}
        </ha-config-section>
      </hass-tabs-subpage>
    `;
  }

  private async _fetchData() {
    this._instances = await fetchOZWInstances(this.hass!);
    if (this._instances.length === 1) {
      navigate(`/config/ozw/network/${this._instances[0].ozw_instance}`, {
        replace: true,
      });
    }
  }

  static get styles(): CSSResultGroup {
    return [
      haStyle,
      css`
        ha-card:last-child {
          margin-bottom: 24px;
        }
        ha-config-section {
          margin-top: -12px;
        }
        :host([narrow]) ha-config-section {
          margin-top: -20px;
        }
        ha-alert {
          display: block;
          margin: 16px;
        }
        ha-alert a {
          text-decoration: none;
        }
        ha-card {
          overflow: hidden;
        }
        ha-card a {
          text-decoration: none;
          color: var(--primary-text-color);
        }
        paper-item-body {
          margin: 16px 0;
        }
        a {
          text-decoration: none;
          color: var(--primary-text-color);
          position: relative;
          display: block;
          outline: 0;
        }
        ha-svg-icon.network-status-icon {
          height: 14px;
          width: 14px;
        }
        .online {
          color: green;
        }
        .starting {
          color: orange;
        }
        .offline {
          color: red;
        }
        ha-svg-icon,
        ha-icon-next {
          color: var(--secondary-text-color);
        }
        .iron-selected paper-item::before,
        a:not(.iron-selected):focus::before {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          pointer-events: none;
          content: "";
          transition: opacity 15ms linear;
          will-change: opacity;
        }
        a:not(.iron-selected):focus::before {
          background-color: currentColor;
          opacity: var(--dark-divider-opacity);
        }
        .iron-selected paper-item:focus::before,
        .iron-selected:focus paper-item::before {
          opacity: 0.2;
        }
      `,
    ];
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "ozw-config-dashboard": OZWConfigDashboard;
  }
}
