// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=504-31645&m=dev
import { LitElement, css, html, nothing, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";

import TemsCardCatalogStyle from "@styles/cards/tems-card-catalog.scss?inline";

import "~icons/material-symbols/rss-feed-rounded";
import "~icons/ic/outline-place";

import "@components/buttons/tems-button";

export type TemsCardCatalogProps = {
  cardType?: string;
  isFullSize: boolean;
  logoOnTop: boolean;

  backgroundImg?: string;
  orgLogo?: string;
  address?: string;
  language?: string;
  date?: string;
  source?: string;
  header?: string;
  content?: string;
  badge?: string;
  tags: string[] | { name: string; type?: string }[];
};

@customElement("tems-card-catalog")
export class TemsCardCatalog extends LitElement {
  static styles = css`
    ${unsafeCSS(TemsCardCatalogStyle)};
  `;

  @property({ attribute: "type", type: String, reflect: true })
  cardType: TemsCardCatalogProps["cardType"] = "vertical";

  @property({ attribute: "address", type: String })
  address: TemsCardCatalogProps["address"];

  @property({ attribute: "language", type: String })
  language: TemsCardCatalogProps["language"];

  @property({ attribute: "date", type: String })
  date: TemsCardCatalogProps["date"];

  @property({ attribute: "source", type: String })
  source: TemsCardCatalogProps["source"];

  @property({ attribute: "background-img", type: String })
  backgroundImg: TemsCardCatalogProps["backgroundImg"];

  @property({ attribute: "org-logo", type: String })
  orgLogo: TemsCardCatalogProps["orgLogo"];

  @property({ attribute: "display-logo", type: Boolean })
  logoOnTop: TemsCardCatalogProps["logoOnTop"] = false;

  @property({ attribute: "full-size", type: Boolean })
  isFullSize: TemsCardCatalogProps["isFullSize"] = false;

  @property({ attribute: "header", type: String })
  header: TemsCardCatalogProps["header"];

  @property({ attribute: "content", type: String })
  content: TemsCardCatalogProps["content"];

  @property({ attribute: "badge", type: String })
  badge: TemsCardCatalogProps["badge"];

  @property({ attribute: false })
  tags: TemsCardCatalogProps["tags"] = [];

  private _getType() {
    const allowedTypes = ["vertical", "horizontal", "bill-image"];
    if (!allowedTypes.includes(String(this.cardType))) {
      this.cardType = "vertical";
    }
    return {
      vertical: this.cardType === "vertical",
      horizontal: this.cardType === "horizontal",
      billImage: this.cardType === "bill-image",
    };
  }

  private renderImageHeader() {
    if (this.isFullSize && (this.backgroundImg || this.badge)) {
      if (this.backgroundImg) {
        return html`<header
          class="image"
          style="background-image: url(${this.backgroundImg})"
        >
          ${this.badge
            ? html`<tems-badge label=${this.badge}></tems-badge>`
            : nothing}
        </header>`;
      }
      return html`<header>
        ${this.badge
          ? html`<tems-badge label=${this.badge}></tems-badge>`
          : nothing}
      </header>`;
    }
    return nothing;
  }

  private renderLogo() {
    if (this.logoOnTop && this.orgLogo) {
      return html`<div
        class="orgLogo"
        style="background-image: url(${this.orgLogo})"
      ></div>`;
    }
    return nothing;
  }

  private renderTags() {
    if (!this.tags || this.tags.length === 0) return nothing;

    return html`<div class="tags">
      ${this.tags
        .filter((t) => typeof t === "string" || t.name)
        .map(
          (tag: string | { name: string; type?: string }) =>
            html`<tems-badge
              size="sm"
              label=${typeof tag === "string" ? tag : tag.name}
              type=${typeof tag !== "string" && ifDefined(tag.type)}
            ></tems-badge>`
        )}
    </div>`;
  }

  private renderContent() {
    if (this.header || this.content) {
      return html`<div class="content">
        ${this.header
          ? html`<div class="card-header">
              <tems-division label=${this.header} type="h4"></tems-division>
            </div>`
          : nothing}
        ${this.content
          ? html`<div class="card-content">
              <tems-division
                label=${this.content}
                type="body-m"
              ></tems-division>
            </div>`
          : nothing}
      </div>`;
    }
    return nothing;
  }

  private renderLangDate() {
    if (!this.date && !this.language) return nothing;

    const date = this.date ? html`<span>${this.date}</span>` : nothing;
    const language = this.language
      ? html`<span>${this.language}</span>`
      : nothing;

    return html`<div class="lang-date">
      ${this.cardType === "bill-image"
        ? html`${language}${date}`
        : html`${date}${language}`}
    </div>`;
  }

  private renderSource() {
    if (!this.source) return nothing;

    return html`<div class="source-logo">
      <div class="source">
        <icon-material-symbols-rss-feed-rounded></icon-material-symbols-rss-feed-rounded>
        ${this.source}
      </div>
      ${this.orgLogo && !this.logoOnTop
        ? html`<div
            class="logo"
            style="background-image: url(${this.orgLogo})"
          ></div>`
        : nothing}
    </div>`;
  }

  private renderAddressAndSource() {
    if (!this.address && !this.source) return nothing;

    if (this.cardType === "vertical" || this.cardType === "bill-image") {
      if (!this.address) return nothing;
      return html`<div class="address">
        <icon-ic-outline-place></icon-ic-outline-place> ${this.address}
      </div>`;
    }

    return html`<div class="address-line">
      <div>
        ${this.address
          ? html`<div class="address">
              <icon-ic-outline-place></icon-ic-outline-place> ${this.address}
            </div>`
          : nothing}
        ${this.renderSource()}
      </div>
      ${this.renderLangDate()}
    </div>`;
  }

  render() {
    const classes = {
      ...this._getType(),
    };

    if (this.cardType === "horizontal") {
      return html`<article class=${classMap(classes)}>
        ${this.renderImageHeader()}
        <main>
          ${this.renderLogo()} ${this.renderTags()} ${this.renderContent()}
          ${this.renderAddressAndSource()}
        </main>
      </article>`;
    }

    if (this.cardType === "bill-image") {
      return html`<article class=${classMap(classes)}>
        ${this.renderImageHeader()}
        <main>
          ${this.renderLogo()} ${this.renderTags()} ${this.renderSource()}
          ${this.renderContent()} ${this.renderAddressAndSource()}
          ${this.renderLangDate()}
        </main>
      </article>`;
    }

    return html`<article class=${classMap(classes)}>
      ${this.renderImageHeader()}
      <main>
        ${this.renderLogo()} ${this.renderLangDate()} ${this.renderContent()}
        ${this.renderAddressAndSource()} ${this.renderSource()}
        ${this.renderTags()}
      </main>
      <div class="action"><slot></slot></div>
    </article>`;
  }
}