import { msg } from "@lit/localize";
import {
  type Sentiment,
  TemsObjectHandler,
} from "@startinblox/solid-tems-shared";
import MediaTrendExplorerContentStyle from "@styles/orbit/mediatrendexplorer/tems-mediatrendexplorer-content.scss?inline";
import { css, html, nothing, unsafeCSS } from "lit";
import { customElement } from "lit/decorators.js";

@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>`;
  }
}