import "@home-assistant/webawesome/dist/components/tag/tag";
import { mdiCheckCircle, mdiHelpCircleOutline } from "@mdi/js";
import type { TemplateResult } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../../components/ha-svg-icon";
import type { AddonStage, AddonState } from "../../../../data/hassio/addon";
import type { HomeAssistant } from "../../../../types";
import { getAppDisplayName } from "../common/app";
import "./supervisor-apps-state";
import "./supervisor-apps-tag";

export interface AppTag {
  label: string;
  variant: "brand" | "success" | "warning" | "danger" | "neutral";
  iconPath?: string;
}

@customElement("supervisor-apps-card-content")
class SupervisorAppsCardContent extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  // eslint-disable-next-line lit/no-native-attributes
  @property() public title!: string;

  @property() public stage: AddonStage = "stable";

  @property() public state?: AddonState;

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

  @property() public description?: string;

  @property({ type: Boolean }) public available = true;

  @property({ attribute: false }) public tags?: AppTag[];

  @property({ attribute: false }) public iconTitle?: string;

  @property({ attribute: false }) public iconClass?: string;

  @property() public icon = mdiHelpCircleOutline;

  @property({ attribute: false }) public iconImage?: string;

  protected render(): TemplateResult {
    return html`
      <div class="app">
        <div class="icon-wrapper">
          ${this.iconImage
            ? html`
                <img
                  class="icon-image"
                  src=${this.iconImage}
                  .title=${this.iconTitle}
                  alt=${this.iconTitle ?? ""}
                />
              `
            : html`
                <ha-svg-icon
                  class="app-icon"
                  .path=${this.icon}
                  .title=${this.iconTitle}
                ></ha-svg-icon>
              `}
        </div>
        <div>
          <div class="title-row">
            <div class="title">
              ${getAppDisplayName(this.title, this.stage)}
            </div>
          </div>
          <div class="addition">
            ${this.description}
            ${
              /* treat as available when undefined */
              this.available === false ? " (Not available)" : ""
            }
          </div>
        </div>
      </div>
      ${this.tags?.length || this.state !== undefined || this.installed
        ? html`
            <div class="footer">
              ${this.state !== undefined
                ? html`<supervisor-apps-state
                    .state=${this.state || "unknown"}
                  ></supervisor-apps-state>`
                : this.installed
                  ? html`<div class="installed">
                      <ha-svg-icon .path=${mdiCheckCircle}></ha-svg-icon>
                      <span
                        >${this.hass.localize(
                          "ui.panel.config.apps.state.installed"
                        )}</span
                      >
                    </div>`
                  : html`<span></span>`}
              ${this.tags?.length
                ? html`<div class="tags">
                    ${this.tags.map(
                      (tag) =>
                        html`<supervisor-apps-tag
                          .variant=${tag.variant}
                          .iconPath=${tag.iconPath}
                          .label=${tag.label}
                        ></supervisor-apps-tag>`
                    )}
                  </div>`
                : nothing}
            </div>
          `
        : nothing}
    `;
  }

  static styles = css`
    .app {
      margin-bottom: var(--ha-space-2);
      gap: var(--ha-space-4);
      display: flex;
    }
    .icon-wrapper {
      position: relative;
      margin-top: var(--ha-space-1);
      width: 40px;
      height: 40px;
      flex-shrink: 0;
    }
    .app-icon {
      margin-left: var(--ha-space-2);
      margin-top: var(--ha-space-2);
      color: var(--secondary-text-color);
    }
    .icon-image {
      max-height: 40px;
      max-width: 40px;
    }
    .title {
      flex: 1;
      min-width: 0;
      color: var(--primary-text-color);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .title-row {
      display: flex;
      align-items: center;
      gap: var(--ha-space-2);
      min-width: 0;
    }
    .addition {
      color: var(--secondary-text-color);
      margin-top: var(--ha-space-1);
      overflow: hidden;
      position: relative;
      height: 2.4em;
      line-height: var(--ha-line-height-condensed);
    }
    .footer {
      border-top: var(--ha-border-width-sm) solid
        var(--ha-color-border-neutral-quiet);
      padding-top: var(--ha-space-2);
      display: flex;
      gap: var(--ha-space-2);
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .tags {
      display: flex;
      gap: var(--ha-space-2);
    }
    .installed {
      display: inline-flex;
      align-items: center;
      gap: var(--ha-space-2);
      color: var(--ha-color-text-secondary);
      font-size: var(--ha-font-size-m);
    }
    .installed ha-svg-icon {
      --mdc-icon-size: 16px;
      color: var(--ha-color-on-success-normal);
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    "supervisor-apps-card-content": SupervisorAppsCardContent;
  }
}
