import { html, nothing, unsafeCSS, css } from "lit";
import { customElement } from "lit/decorators.js";

import { TemsObjectHandler } from "@helpers";
import type { Sentiment } from "@src/rdf";
import { msg } from "@lit/localize";

import MediaTrendExplorerContentStyle from "@styles/orbit/mediatrendexplorer/tems-mediatrendexplorer-content.scss?inline";
import "~icons/ic/outline-place";
@customElement("tems-mediatrendexplorer-content")
export class TemsMediatrendexplorerContent extends TemsObjectHandler {
  object?: Sentiment;
  static styles = css`
    ${unsafeCSS(MediaTrendExplorerContentStyle)}
  `;

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

    return html`<section>
      <div>
        <h2 class="has-image">
          ${this.object.keyword}
          <div>
            ${this.object.providers
              ?.filter((provider) => provider.image)
              .map(
                (provider) =>
                  html`<img
                    alt=${provider.image?.name || provider.name || nothing}
                    src=${provider.image?.url}
                  />`
              )}
          </div>
        </h2>
        ${this.object.location?.country ? html`<p class="location">
          <icon-ic-outline-place></icon-ic-outline-place> ${this.object.location?.country}
        </p>` : nothing}
      </div>
      <div class="trend-iframe">
        <iframe src=${this.object.iframe}></iframe>
      </div>
      ${this.object.topics && this.object.topics.length > 0
        ? html`<div class="related-topics">
            <h3>${msg("Related Topics")}</h3>
            <div class="badges">
              ${this.object.topics?.map(
                (topic) => html`<tems-badge .label=${topic.name}></tems-badge>`
              )}
            </div>
          </div>`
        : nothing}
    </section>`;
  }
}