import * as utils from "@helpers";
import { msg } from "@lit/localize";
import { Task } from "@lit/task";
import type { PropertiesPicker, Resource } from "@src/component";
import MediaTrendExplorerStyle from "@styles/orbit/mediatrendexplorer/tems-mediatrendexplorer.scss?inline";
import { css, html, nothing, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("solid-tems-mediatrendexplorer")
export class TemsMediatrendexplorer extends utils.OrbitComponent {
  @property({ attribute: "header", type: String })
  header?: string = "Media Trend Explorer";

  cherryPickedProperties: PropertiesPicker[] = [
    { key: "@id", value: "@id" },
    { key: "update_date", value: "update_date" },
    { key: "keyword", value: "keyword" },
    { key: "location", value: "location", expand: true },
    { key: "country", value: "country" },
    { key: "iframe", value: "iframe" },
    { key: "topics", value: "topics", expand: true },
    { key: "name", value: "name" },
    { key: "providers", value: "providers", expand: true },
    { key: "image", value: "image", expand: true },
    { key: "url", value: "url" },
  ];
  static styles = css`
    ${unsafeCSS(MediaTrendExplorerStyle)}
  `;

  _getResource = new Task(this, {
    task: async ([dataSrc, objSrc]) => {
      if (
        !dataSrc ||
        !this.orbit ||
        (!this.noRouter &&
          this.route &&
          !this.route.startsWith(this.currentRoute))
      )
        return;
      if (!this.hasCachedDatas || this.oldDataSrc !== dataSrc) {
        this.datas = await this._getProxyValue(dataSrc);
        this.hasCachedDatas = true;
      }
      if (this.oldDataSrc !== dataSrc) {
        this.oldDataSrc = dataSrc;
      }
      this.object = this.datas.find((obj: Resource) => obj["@id"] === objSrc);
      return utils.sort(this.datas, "keyword", "asc");
    },
    args: () => [
      this.defaultDataSrc,
      this.dataSrc,
      this.caching,
      this.currentRoute,
    ],
  });

  _selectKeyword(e: Event) {
    e.preventDefault();
    if (this.route) utils.requestNavigation(this.route, e.target?.value);
  }

  render() {
    return (
      this.gatekeeper() ||
      this._getResource.render({
        pending: () => html`<solid-loader></solid-loader>`,
        complete: (datas) => {
          if (!datas) {
            return nothing;
          }

          return html`<tems-viewport>
            <tems-header slot="header" heading=${this.header}
              ><tems-button
                slot="cta"
                type="primary"
                disabled=""
                .iconLeft=${html`<icon-material-symbols-shopping-cart-outline></icon-material-symbols-shopping-cart-outline>`}
              ></tems-button
            ></tems-header>
            <div slot="content">
              <div class="filters">
                <label>
                  <icon-mingcute-search-3-line></icon-mingcute-search-3-line>
                  <select @change=${this._selectKeyword}>
                    <icon-ic-outline-place></icon-ic-outline-place>
                    <option
                      value=${this.defaultDataSrc}
                      ?selected=${this.dataSrc === this.defaultDataSrc}
                    >
                      ${msg("Select a keyword")}
                    </option>
                    ${datas.map((d) => {
                      return html`<option
                        value="${d["@id"]}"
                        ?selected="${d["@id"] === this.dataSrc}"
                      >
                        ${d.keyword}
                      </option>`;
                    })}
                  </select>
                </label>
              </div>
              ${this.object
                ? html`<tems-mediatrendexplorer-content
                    .object=${this.object}
                  ></tems-mediatrendexplorer-content>`
                : nothing}
            </div>
          </tems-viewport>`;
        },
      })
    );
  }
}