import { localized, msg } from "@lit/localize";
import { type TemplateResult, css, html, nothing, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";

import {
  formatDate,
  offerKindHandler,
  offerKindActionHandler,
  TemsObjectHandler,
} from "@helpers";
import type { TemplateResultOrSymbol } from "@src/tems.d.ts";

import ModalStyle from "@styles/modal/tems-modal.scss?inline";

import * as rdf from "@src/rdf";

import "~icons/ci/check";
import "~icons/material-symbols/close-rounded";
import "~icons/material-symbols/rss-feed-rounded";
import "~icons/mingcute/arrow-right-up-line";

export type TemsModalProps = rdf.ValidM18Object;

@customElement("tems-modal")
@localized()
export class TemsModal extends TemsObjectHandler {
  static styles = css`
    ${unsafeCSS(ModalStyle)}
  `;

  @property({ attribute: false, type: Object })
  object: TemsModalProps["object"] = { "@id": "" };

  _renderBoolean(field: boolean): TemplateResultOrSymbol {
    if (field) {
      return html`<tems-badge class="badges" type="success" size="sm"
        ><icon-ci-check></icon-ci-check
      ></tems-badge>`;
    }
    return html`<tems-badge class="badges" type="error" size="sm"
      ><icon-material-symbols-close-rounded></icon-material-symbols-close-rounded
    ></tems-badge>`;
  }

  _renderDivision(type: string, label: string): TemplateResult {
    return html`<tems-division type="${type}"
      ><div>${unsafeHTML(String(label))}</div></tems-division
    >`;
  }

  _renderBadge(type?: string, label?: string): TemplateResultOrSymbol {
    if (!label) return nothing;
    return html`<tems-badge
      type=${type}
      label=${label}
      size="sm"
    ></tems-badge>`;
  }

  _renderButton(
    iconLeft?: TemplateResult,
    size?: string,
    label?: string,
    type?: string,
    iconRight?: TemplateResult,
    disabled?: boolean
  ): TemplateResultOrSymbol {
    if (!label) return nothing;
    return html`<tems-button
      .iconLeft=${ifDefined(iconLeft)}
      .iconRight=${ifDefined(iconRight)}
      size=${ifDefined(size)}
      label=${ifDefined(label)}
      type=${ifDefined(type)}
      disabled=${disabled || nothing}
    ></tems-button>`;
  }

  _renderIframe(url: string): TemplateResult {
    return html`<iframe src="${url}"></iframe>`;
  }

  _renderKindBadgeComponent(
    object: rdf.DataOffer | undefined = undefined
  ): TemplateResultOrSymbol {
    const data_offer = object || this.object;
    if (!data_offer.offers || data_offer.offers.length === 0) return nothing;

    return html`<div class="badges">
      ${data_offer.offers.map((offer: rdf.Offer) =>
        this._renderBadge("information", offerKindHandler(offer.kind))
      )}
    </div> `;
  }

  _renderCategoryBadgeComponent(): TemplateResultOrSymbol {
    const badgeType: string = this.isType(rdf.RDFTYPE_DATAOFFER)
      ? "default"
      : "information";
    if (!this.object.categories || this.object.categories.length === 0)
      return nothing;

    return html`<div class="badges">
      ${this.object.categories.map((category: rdf.NamedResource) =>
        this._renderBadge(badgeType, category.name || "")
      )}
    </div>`;
  }

  _renderDescription(): TemplateResult {
    return this._renderDivision("body-m", this.object.description);
  }

  _renderTitleValueDivision(
    title: string,
    value: string | undefined
  ): TemplateResultOrSymbol {
    if (!value) return nothing;
    return html`${this._renderDivision("h4", title)}
    ${this._renderDivision("body-m", value)}`;
  }

  _renderLicences(): TemplateResult {
    return html`<div>
      ${this.object.licences.length !== 0
        ? html`${this._renderDivision("h4", msg("Licences"))}
          ${this.object.licences.map((licence: rdf.Licence) => {
            if (!licence.name) return nothing;
            return html`<tems-division type="body-m">
              ${licence.url
                ? html`<a href=${licence.url} target="_blank"
                    >${licence.name || msg("See more")}
                    <icon-mingcute-arrow-right-up-line></icon-mingcute-arrow-right-up-line
                  ></a>`
                : html`${licence.name}`}</tems-division
            > `;
          })}`
        : html`${this._renderDivision("h4", msg("Licences"))}
            <tems-division type="body-m">-</tems-division>`}
    </div>`;
  }

  _renderBgImg(imgSrc: string, className: string) {
    if (!imgSrc) {
      return nothing;
    }
    return html`<div
      class="${className}"
      style="background-image: url('${imgSrc}')"
    ></div>`;
  }

  _renderImageSingle(): TemplateResultOrSymbol {
    if (!this.object.image && !this.object.images) {
      return nothing;
    }

    const images = [];

    if (this.object.image) {
      images.push(this.object.image);
    }

    if (this.object.images) {
      images.push(...this.object.images);
    }

    return html`<div class="default-image-grid">
      ${images.map((image: rdf.Image) => {
        if (image.iframe && image.url) {
          return html`${this._renderIframe(image.url)}`;
        }

        return html`<img
        class="default-img"
        src=${image.url}
        alt=${ifDefined(image.name)}
      ></div>`;
      })}
    </div>`;
  }

  _renderImageArray(): TemplateResultOrSymbol {
    const iframe = this.object.images.filter(
      (image: rdf.Image) => image.iframe && image.url
    );
    if (iframe.length > 0) {
      return html`${this._renderIframe(iframe[0].url)}`;
    }

    const filteredImages = this.object.images.filter(
      (image: rdf.Image) => !image.iframe && image.url
    );

    const imgCount = filteredImages.length;

    switch (imgCount) {
      case 0:
        return nothing;
      case 1:
        return html`<div
          class="main-img"
          style="background-image: url(${filteredImages[0].url})"
        ></div>`;
      case 2:
        return html`<div class="main-img case-2">
          ${this._renderBgImg(filteredImages[0].url, "full-width")}
          ${this._renderBgImg(filteredImages[1].url, "full-width")}
        </div>`;
      case 3:
        return html`<div class="main-img case-3">
          ${this._renderBgImg(filteredImages[0].url, "full-width")}
          <div class="img-inner-row">
            <div class="double-image">
              ${this._renderBgImg(filteredImages[1].url, "")}
              ${this._renderBgImg(filteredImages[2].url, "")}
            </div>
          </div>
        </div>`;
      default:
        return html`<div class="main-img case-4">
          ${this._renderBgImg(filteredImages[0].url, "full-width")}
          <div class="img-inner-row">
            <div class="double-image">
              ${this._renderBgImg(filteredImages[1].url, "")}
              ${this._renderBgImg(filteredImages[2].url, "")}
            </div>
            ${this._renderBgImg(filteredImages[3].url, "last-img")}
          </div>
        </div>`;
    }
  }

  _renderAboutProvider(): TemplateResultOrSymbol {
    if (this.object.providers.length === 0) return nothing;

    return html`${this._renderDivision("h4", msg("Providers"))}
    ${this.object.providers.map(
      (provider: rdf.Provider) =>
        html`<div>
            <img
              src="${provider.image?.url}"
              alt=${provider.name}
              class="default-img"
            />
          </div>
          ${this._renderTitleValueDivision(
            msg("About the providers"),
            provider.description || msg("No description provided")
          )}`
    )}`;
  }

  _renderCompatibleServices(): TemplateResultOrSymbol {
    if (this.object.services.length === 0) return nothing;

    return html`${this._renderDivision(
      "h4",
      this.isType(rdf.RDFTYPE_PROVIDER)
        ? msg("Available Services")
        : msg("Compatible Services")
    )}
    ${this.object.services.map(
      (service: rdf.Service) =>
        html`<tems-card-catalog
          type="vertical"
          header=${ifDefined(service.name)}
          background-img=${ifDefined(service.images?.[0]?.url)}
          full-size=""
          content=${ifDefined(service.description)}
        ></tems-card-catalog>`
    )}`;
  }

  _renderCompatibleDataOffers(): TemplateResultOrSymbol {
    if (this.object.data_offers.length === 0) return nothing;

    return html`${this._renderDivision("h4", msg("Available Data Offers"))}
    ${this.object.data_offers.map(
      (data_offer: rdf.DataOffer) =>
        html`<tems-card-catalog
          type="vertical"
          header=${ifDefined(data_offer.name)}
          background-img=${ifDefined(data_offer.image?.url)}
          full-size=""
          content=${ifDefined(data_offer.description)}
          .tags=${[{ name: data_offer.name, type: "information" }]}
        ></tems-card-catalog>`
    )}`;
  }
  // tags=${this._renderKindBadgeComponent(data_offer)}

  _renderOffers(): TemplateResult {
    return html`${this._renderDivision("h4", msg("Offers"))}
    ${this.object.offers.map((offer: rdf.Offer) => {
      const msgSubscribe: string = offerKindActionHandler(offer.kind);

      if (!msgSubscribe) return nothing;
      return html`<tems-card-catalog
        type="vertical"
        header=${ifDefined(offer.name)}
        content=${ifDefined(offer.description)}
        ><div>
          ${this._renderButton(
            undefined,
            "sm",
            msgSubscribe,
            "primary",
            undefined,
            true
          )}
        </div></tems-card-catalog
      >`;
    })}`;
  }

  _renderDataOfferBadgeRow(): TemplateResult {
    return html`<div class="badge-row flex flex-row">
      ${this.renderTemplateWhenWith(["offers"], this._renderKindBadgeComponent)}
      ${this.renderTemplateWhenWith(
        ["categories"],
        this._renderCategoryBadgeComponent
      )}
    </div>`;
  }

  _renderColumns(...columns: TemplateResultOrSymbol[]): TemplateResultOrSymbol {
    const filteredColumns = columns.filter((col) => col !== nothing);

    if (filteredColumns.length === 1) {
      return columns[0];
    }

    return html`<div class="multiple-columns flex flex-row flex-1">
      ${filteredColumns.map(
        (col) => html`<div class="half flex flex-column wrap">${col}</div>`
      )}
    </div>`;
  }

  _renderServiceSpecificModal(): TemplateResultOrSymbol {
    return html`${this.renderTemplateWhenWith(
      ["images"],
      this._renderImageSingle
    )}
    ${this._renderColumns(
      html`${this.renderTemplateWhenWith(["long_description"], () =>
        this._renderTitleValueDivision(
          msg("Features & Functionalities"),
          this.object.long_description
        )
      )}${this.renderTemplateWhenWith(
        [["is_in_app", "is_external", "is_api"]],
        () => html`${this._renderDivision("h4", msg("Installation Possible"))}
          <div class="badges">
            ${this.renderTemplateWhenWith(
              ["is_in_app"],
              () => html`${this._renderBadge("success", msg("In-App"))}</div>`
            )}
            ${this.renderTemplateWhenWith(
              ["is_external"],
              () => html`${this._renderBadge("success", msg("External"))}</div>`
            )}
            ${this.renderTemplateWhenWith(
              ["is_api"],
              () => html`${this._renderBadge("success", msg("API"))}</div>`
            )}
          </div>`
      )}${this.renderTemplateWhenWith(
        ["developper", "developper.url"],
        () => html`${this._renderDivision("h4", msg("Developper"))}
          <img
            src="${this.object.developper.url}"
            alt=${this.object.developper.name}
            class="default-img"
          />`
      )}${this.renderTemplateWhenWith(["release_date"], () =>
        this._renderTitleValueDivision(
          msg("Release Date"),
          formatDate(this.object.release_date)
        )
      )}${this.renderTemplateWhenWith(["last_update"], () =>
        this._renderTitleValueDivision(
          msg("Last Update"),
          formatDate(this.object.last_update)
        )
      )}${this.renderTemplateWhenWith(["documentation_url"], () =>
        this._renderButton(
          undefined,
          "sm",
          "Read the full documentation",
          "outline-gray"
        )
      )}`
    )}`;
  }

  _renderModal(): TemplateResultOrSymbol {
    if (!this.object || !this.object["@type"]) {
      return nothing;
    }

    return html`${this.renderTemplateWhenWith(
        [rdf.RDFTYPE_OBJECT, "images"],
        this._renderImageArray
      )}
      <div class="modal-box">
        <div class="modal-content">
          ${this.renderTemplateWhenWith(
            ["providers", rdf.RDFTYPE_OBJECT],
            () => {
              return html`<div class="provider-line">
                ${this.object.providers.map(
                  (provider: rdf.Provider) =>
                    html`<div>
                      ${this._renderButton(
                        html`<icon-material-symbols-rss-feed-rounded></icon-material-symbols-rss-feed-rounded>`,
                        "sm",
                        provider.name || "",
                        "link-color"
                      )}
                      ${this._renderBgImg(
                        provider.image?.url || "",
                        "provider-logo"
                      )}
                    </div>`
                )}
              </div>`;
            }
          )}
          ${this.renderTemplateWhenWith(
            [
              [
                rdf.RDFTYPE_PROVIDER,
                rdf.RDFTYPE_SERVICE,
                rdf.RDFTYPE_DATAOFFER,
              ],
            ],
            () => this._renderDivision("h2", this.object.name)
          )}
          ${this.renderTemplateWhenWith([rdf.RDFTYPE_OBJECT, "title"], () =>
            this._renderDivision("h2", this.object.title)
          )}
          ${this.renderTemplateWhenWith(
            [rdf.RDFTYPE_DATAOFFER],
            this._renderDataOfferBadgeRow
          )}
          ${this.renderTemplateWhenWith(
            [rdf.RDFTYPE_OBJECT, "keywords"],
            () => html`<div class="badges">
              ${this.object.keywords.map((keyword: rdf.NamedResource) =>
                this._renderBadge("information", keyword.name ?? "")
              )}
            </div>`
          )}
          ${this.renderTemplateWhenWith(
            ["description"],
            this._renderDescription
          )}
          ${this.renderTemplateWhenWith(["image"], this._renderImageSingle)}
          ${this.isType(rdf.RDFTYPE_SERVICE)
            ? this._renderServiceSpecificModal()
            : this._renderColumns(
                html`${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_3D_OBJECT],
                  () => {
                    return html`${this.renderTemplateWhenWith(
                      [["categories", "time_period"]],
                      () =>
                        html`<div
                          class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
                        >
                          ${this.renderTemplateWhenWith(
                            ["categories[]"],
                            () => html`<div class="flex-1 half">
                              ${this._renderDivision("h3", msg("Category"))}
                              ${this._renderCategoryBadgeComponent()}
                            </div>`
                          )}
                          ${this.renderTemplateWhenWith(["time_period"], () => {
                            return html`<div class="flex-1 half">
                              ${this._renderDivision("h3", msg("Time period"))}
                              <div class="badges">
                                ${this._renderBadge(
                                  "information",
                                  this.object.time_period
                                )}
                                <div></div>
                              </div>
                            </div>`;
                          })}
                        </div>`
                    )}
                    ${this.renderTemplateWhenWith(
                      [["country", "location"]],
                      () =>
                        html`<div
                          class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
                        >
                          ${this.renderTemplateWhenWith(["country"], () => {
                            return html`<div class="flex-1 half">
                              ${this._renderDivision("h3", msg("Country"))}
                              ${this._renderDivision(
                                "body-m",
                                this.object.country
                              )}
                            </div>`;
                          })}
                          ${this.renderTemplateWhenWith(["location"], () => {
                            return html`<div class="flex-1 half">
                              ${this._renderDivision("h3", msg("Location"))}
                              ${this._renderDivision(
                                "body-m",
                                `${this.object.location?.address} ${this.object.location?.city} ${this.object.location?.state}`
                              )}
                            </div>`;
                          })}
                        </div>`
                    )}
                    ${this.renderTemplateWhenWith(
                      ["actual_representation"],
                      () => {
                        return html`<div class="flex flex-1 flex-column">
                          ${this._renderDivision(
                            "h3",
                            msg("Actual representation")
                          )}
                          ${this._renderDivision(
                            "body-m",
                            this.object.actual_representation
                          )}
                        </div>`;
                      }
                    )}
                    ${this.renderTemplateWhenWith(
                      [
                        [
                          "format",
                          "file_size",
                          "year",
                          "texture",
                          "texture_formats",
                          "texture_resolution",
                          "is_low_polygons",
                          "polygons",
                          "ai",
                          "allow_ai",
                        ],
                      ],
                      () => {
                        return html`<div
                          class="metadata-section flex flex-column flex-1 align-items-flex-start justify-content-space-between"
                        >
                          ${this._renderDivision("h2", msg("Technical"))}
                          ${this.renderTemplateWhenWith(
                            [["format", "file_size"]],
                            () => {
                              return html`<div
                                class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
                              >
                                ${this.renderTemplateWhenWith(
                                  ["format"],
                                  () => html`<div class="half">
                                    ${this._renderTitleValueDivision(
                                      msg("Format file"),
                                      this.object.format.name
                                    )}
                                  </div>`
                                )}${this.renderTemplateWhenWith(
                                  ["file_size"],
                                  () => html`<div class="half">
                                    ${this._renderTitleValueDivision(
                                      msg("File size"),
                                      this.object.file_size
                                    )}
                                  </div>`
                                )}
                              </div>`;
                            }
                          )}
                          ${this.renderTemplateWhenWith(["year"], () => {
                            return html`<div class="flex flex-1 flex-column">
                              ${this._renderTitleValueDivision(
                                msg("Year of creation"),
                                this.object.year
                              )}
                            </div>`;
                          })}
                          ${this.renderTemplateWhenWith(["texture"], () => {
                            return html`<div class="flex flex-1 flex-column">
                              ${this._renderTitleValueDivision(
                                msg("Texture"),
                                this.object.texture
                              )}
                            </div>`;
                          })}
                          ${this.renderTemplateWhenWith(
                            ["texture_formats"],
                            () => {
                              return html`<div class="flex flex-1 flex-column">
                                ${this._renderTitleValueDivision(
                                  msg("Texture formats"),
                                  this.object.texture_formats
                                )}
                              </div>`;
                            }
                          )}
                          ${this.renderTemplateWhenWith(
                            ["texture_resolution"],
                            () => {
                              return html`<div class="flex flex-1 flex-column">
                                ${this._renderTitleValueDivision(
                                  msg("Texture resolution"),
                                  this.object.texture_resolution
                                )}
                              </div>`;
                            }
                          )}
                          <div class="flex flex-1 flex-column">
                            ${this._renderDivision("h4", msg("Low-poly"))}
                            ${this._renderBoolean(this.object.is_low_polygons)}
                          </div>
                          <div
                            class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
                          >
                            <div class="flex flex-column half">
                              ${this._renderDivision("h4", msg("AI-generated"))}
                              ${this._renderBoolean(this.object.ai)}
                            </div>
                            <div class="flex flex-column half">
                              ${this._renderDivision(
                                "h4",
                                msg("Allowed for AI")
                              )}
                              ${this._renderBoolean(this.object.allow_ai)}
                            </div>
                          </div>
                        </div>`;
                      }
                    )}
                    ${this.renderTemplateWhenWith(
                      [["prices", "rights_holder", "creator", "licenses"]],
                      () => {
                        return html`<div
                          class="metadata-section flex flex-column flex-1 align-items-flex-start justify-content-space-between"
                        >
                          ${this._renderDivision("h2", msg("Informations"))}
                          ${this.renderTemplateWhenWith(["prices"], () =>
                            this._renderTitleValueDivision(
                              msg("Prices"),
                              this.object.prices
                            )
                          )}
                          ${this.renderTemplateWhenWith(["rights_holder"], () =>
                            this._renderTitleValueDivision(
                              msg("Rights holder"),
                              this.object.rights_holder
                            )
                          )}
                          ${this.renderTemplateWhenWith(["creator"], () =>
                            this._renderTitleValueDivision(
                              msg("Creator"),
                              this.object.creator
                            )
                          )}
                          ${this.renderTemplateWhenWith(
                            ["licences"],
                            this._renderLicences
                          )}
                        </div>`;
                      }
                    )}
                    ${this.renderTemplateWhenWith([["providers"]], () => {
                      if (this.object.providers.length === 0) {
                        return nothing;
                      }
                      return html`<div
                        class="metadata-section flex flex-column flex-1 align-items-flex-start justify-content-space-between"
                      >
                        ${this._renderDivision(
                          "h2",
                          this.object.providers.length === 1
                            ? msg("Provider")
                            : msg("Providers")
                        )}
                        ${this.object.providers.map(
                          (provider: rdf.Provider) => {
                            const serviceNames: string[] = [];
                            if (provider.services) {
                              provider.services.map((service: rdf.Service) => {
                                if (service.name)
                                  serviceNames.push(service.name);
                              });
                            }
                            return html`<div class="flex flex-column metadata-provider">
                                <div class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width">
                                  ${
                                    provider.image?.url
                                      ? html`<img
                                          src="${provider.image.url}"
                                          alt=${provider.name}
                                          class="default-img"
                                        />`
                                      : nothing
                                  }
                                  <div class="flex flex-column flex-1">
                                    ${this._renderDivision(
                                      "h4",
                                      msg("Provider information")
                                    )}
                                    ${this._renderDivision(
                                      "body-m",
                                      provider.name ?? ""
                                    )}
                                  </div>
                                </div>
                                ${
                                  serviceNames.length !== 0
                                    ? html`${this._renderDivision(
                                        "h4",
                                        this.object.providers.length === 1
                                          ? msg("Service provided")
                                          : msg("Services provided")
                                      )}
                                      ${this._renderDivision(
                                        "body-m",
                                        this.object.providers.length === 1
                                          ? serviceNames.toString()
                                          : serviceNames.join(", ")
                                      )}`
                                    : nothing
                                }${
                              provider.contact_url
                                ? html`<div class="flex flex-column flex-1">
                                    ${this._renderDivision(
                                      "h4",
                                      msg("Contact details")
                                    )}
                                    ${this._renderDivision(
                                      "body-m",
                                      provider.contact_url
                                    )}
                                  </div>`
                                : nothing
                            }
                                </div>
                              </div>`;
                          }
                        )}
                      </div>`;
                    })}`;
                  }
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_MEDIA_OBJECT, "language"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Language"),
                      this.object.language.name
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_MEDIA_OBJECT, "creation_date"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Published Date"),
                      formatDate(this.object.creation_date)
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_MEDIA_OBJECT, "update_date"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Update Date"),
                      formatDate(this.object.update_date)
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_MEDIA_OBJECT, "licences"],
                  this._renderLicences
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_MEDIA_OBJECT, "location"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Location"),
                      `${
                        this.object.location?.address
                          ? `${this.object.location.address}, `
                          : ""
                      }${this.object.location?.city ?? ""} ${
                        this.object.location?.country ?? ""
                      }`
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_FACT_CHECKING_OBJECT, "organisation"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Organisation"),
                      this.object.organisation
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_FACT_CHECKING_OBJECT, "person"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Person"),
                      this.object.person
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_FACT_CHECKING_OBJECT, "version"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Version"),
                      this.object.version
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_DATAOFFER, "providers"],
                  this._renderAboutProvider
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_DATAOFFER, "services"],
                  this._renderCompatibleServices
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_INTERACTIVE_INFOGRAPHICS_OBJECT, "instruction"],
                  () => {
                    return html`${this._renderDivision(
                      "h4",
                      msg("Instruction")
                    )}
                    ${this._renderButton(
                      undefined,
                      "sm",
                      this.object.instruction,
                      "outline-gray"
                    )}`;
                  }
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_MEDIA_OBJECT, "editor"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Editor"),
                      this.object.editor
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_MEDIA_OBJECT, "original_language"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Original Language"),
                      this.object.original_language
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_MEDIA_OBJECT, "contributors"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Contributors"),
                      this.object.contributors
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_MEDIA_OBJECT, "publication_service"],
                  () =>
                    this._renderTitleValueDivision(
                      msg("Publication Service"),
                      this.object.publication_service
                    )
                )}${this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_OBJECT, "assets[]"],
                  () => {
                    return html`
                      ${this._renderDivision("h4", msg("Accessible Assets"))}
                      <div class="assets-rows">
                        ${this.object.assets.map((asset: rdf.Asset) => {
                          return html`
                            <div
                              class="asset-row flex flex-row align-items-center flex-1"
                            >
                              <div class="asset-format">
                                <p>
                                  ${asset.format ? asset.format.name : nothing}
                                </p>
                              </div>
                              <div class="flex flex-column">
                                ${asset.name
                                  ? html`<p>${asset.name}</p>`
                                  : nothing}
                                ${asset.size
                                  ? html`<p>${asset.size}</p>`
                                  : nothing}
                              </div>
                            </div>
                          `;
                        })}
                      </div>
                    `;
                  }
                )}`,
                this.renderTemplateWhenWith(["offers"], this._renderOffers),
                this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_PROVIDER, "services"],
                  this._renderCompatibleServices
                ),
                this.renderTemplateWhenWith(
                  [rdf.RDFTYPE_PROVIDER, "data_offers"],
                  this._renderCompatibleDataOffers
                )
              )}${this.renderTemplateWhenWith(
            [rdf.RDFTYPE_PROVIDER, "contact_url"],
            () =>
              html`<div class="flex flex-column flex-1">
                ${this._renderDivision("h4", msg("Contact"))}
                ${this._renderDivision("body-m", this.object.contact_url)}
              </div>`
          )}
        </div>
      </div> `;
  }

  _closeModal() {
    this.dispatchEvent(new CustomEvent("close"));
  }

  _addBookmark() {
    this.dispatchEvent(
      new CustomEvent("bookmark", {
        detail: { add: true, object: this.object },
      })
    );
  }

  _removeBookmark() {
    this.dispatchEvent(
      new CustomEvent("bookmark", {
        detail: { add: false, object: this.object },
      })
    );
  }

  _purchase() {
    console.log(msg("Disabled for POC"));
    this.dispatchEvent(new CustomEvent("purchase"));
  }

  render() {
    return html`<div class="modal">
      <div class="topbar">
        <tems-button
          @click=${this._closeModal}
          type="outline-gray"
          .iconLeft=${html`<icon-material-symbols-close-rounded></icon-material-symbols-close-rounded>`}
        ></tems-button>
        ${this.isType(rdf.RDFTYPE_OBJECT)
          ? html`${this.object.owned
                ? html`<tems-button @click=${this._removeBookmark}
                    >${msg("Remove from my bookmarks")}</tems-button
                  >`
                : html`<tems-button @click=${this._addBookmark}
                    >${msg("Add to my bookmarks")}</tems-button
                  >`}
              <tems-button @click=${this._purchase} disabled=""
                >${msg("Purchase")}</tems-button
              >`
          : nothing}
        ${this.isType(rdf.RDFTYPE_SERVICE)
          ? html`<tems-button disabled=""
                >${msg("Integrate Externally")}</tems-button
              >
              <tems-button disabled=""
                >${msg("Activate this service")}</tems-button
              >`
          : nothing}
      </div>
      <div class="modal-content-wrapper">${this._renderModal()}</div>
    </div>`;
  }
}