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

import { filterObjectByType, TemsObjectsHandler } from "@helpers";
import type { TemsCardCatalogProps } from "@components/cards/tems-card-catalog";
import * as rdf from "@src/rdf";
import {
  filterObjectById,
  filterObjectByInterval,
  filterObjectByValue,
  filterObjectByDateAfter,
  filterObjectByNamedValue,
} from "@helpers";
import { msg } from "@lit/localize";
import type { Resource, SearchObject } from "@src/tems";

@customElement("tems-catalog-data-holder")
export class TemsCatalogDataHolder extends TemsObjectsHandler {
  static styles = css`
    .card-grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 20px;
    }
    .card-grid-vertical {
      justify-content: stretch;
    }
    .card-grid-vertical tems-card-catalog {
      width: 354px;
      height: auto;
    }
    tems-card-catalog {
      cursor: pointer;
    }
  `;

  @state()
  view: "card" | "list" | "table" | "map" = "card";

  @state()
  search: SearchObject[] = [];

  objects: (
    | rdf.Object_3DObject
    | rdf.Object_MediaObject_CivilSociety
    | rdf.Object_MediaObject_FactChecking
    | rdf.Object_MediaObject_InteractiveInfographics
    | rdf.Object_MediaObject_Stories
    | rdf.Provider
    | rdf.Service
    | rdf.DataOffer
  )[] = [];

  @state()
  protected _displayObjects: (TemsCardCatalogProps & { original: Resource })[] =
    [];

  protected filter(objects: Resource[], filters: SearchObject[] = []) {
    if (!filters || filters.length === 0 || !objects || objects.length === 0) {
      return objects;
    }

    const groupedFilters = new Map<string, SearchObject[]>();
    for (const filter of filters) {
      const groupKey = filter.name;
      const group = groupedFilters.get(groupKey) || [];
      group.push(filter);
      groupedFilters.set(groupKey, group);
    }

    let currentFilteredObjects = [...objects];

    for (const filterGroup of groupedFilters.values()) {
      if (currentFilteredObjects.length === 0) {
        break;
      }

      const tempResults = [];
      for (const filter of filterGroup) {
        switch (filter.type) {
          case "interval":
            tempResults.push(
              filterObjectByInterval(
                currentFilteredObjects,
                filter.name,
                filter.value
              )
            );
            break;
          case "dateAfter":
            tempResults.push(
              filterObjectByDateAfter(
                currentFilteredObjects,
                filter.name,
                filter.value
              )
            );
            break;
          case "matchId":
            tempResults.push(
              filterObjectById(
                currentFilteredObjects,
                filter.name,
                filter.value
              )
            );
            break;
          case "matchType":
            tempResults.push(
              filterObjectByType(currentFilteredObjects, filter.value)
            );
            break;
          case "exact":
            tempResults.push(
              filterObjectByNamedValue(
                currentFilteredObjects,
                filter.name,
                filter.value
              )
            );
            break;
          default:
            tempResults.push(
              filterObjectByValue(currentFilteredObjects, filter.value)
            );
        }
      }
      currentFilteredObjects = [...tempResults.flat()];
    }

    return currentFilteredObjects;
  }

  protected _getProp(obj: Resource, ...names: string[]) {
    if (!obj) return undefined;
    for (const name of names) {
      if (name in obj) {
        return obj[name];
      }
    }
    return undefined;
  }

  protected _areSameType(objects: Resource[] = this.objects): boolean {
    if (!objects || objects.length === 0) {
      return true;
    }

    const firstType = objects[0]["@type"];
    for (const obj of objects) {
      const objType = obj["@type"];

      if (Array.isArray(firstType) && Array.isArray(objType)) {
        if (
          firstType.length !== objType.length ||
          !firstType.every((val, index) => val === objType[index])
        ) {
          return false;
        }
      } else if (Array.isArray(firstType) && !Array.isArray(objType)) {
        return false;
      } else if (!Array.isArray(firstType) && Array.isArray(objType)) {
        return false;
      } else if (objType !== firstType) {
        return false;
      }
    }

    return true;
  }

  protected _typeToString(types: string[]) {
    return types
      .map((type) => rdf.typeMap[type])
      .filter(String)
      .join("");
  }

  protected _handleClickEvent(originalObj: Resource) {
    this.dispatchEvent(new CustomEvent("clicked", { detail: originalObj }));
  }

  willUpdate(changedProperties: PropertyValues) {
    if (changedProperties.has("objects") || changedProperties.has("search")) {
      const filteredObjects = this.filter(this.objects, this.search);
      this.dispatchEvent(
        new CustomEvent("result-count", { detail: filteredObjects.length })
      );
      const objectsAreSameType = this._areSameType(filteredObjects);

      this._displayObjects = filteredObjects.map((obj) => {
        const getter = (propName: string, ...fallbackNames: string[]) =>
          this._getProp(obj, propName, ...fallbackNames);

        const tags = [];
        let categories = getter("categories", "keywords");
        let firstCategory = "";
        if (categories) {
          if (!Array.isArray(categories)) categories = [categories];

          if (
            !(!objectsAreSameType && this.hasType(rdf.RDFTYPE_OBJECT, [obj])) &&
            categories.length > 0 &&
            !this.hasType(rdf.RDFTYPE_PROVIDER, [obj]) &&
            !this.hasType(rdf.RDFTYPE_DATAOFFER, [obj])
          ) {
            firstCategory = categories[0]?.name;
            tags.push(
              ...categories.slice(1).map((c: rdf.NamedResource) => c.name)
            );
          } else {
            tags.push(...categories.map((c: rdf.NamedResource) => c.name));
          }
        }

        let location = "";
        if (this.hasType(rdf.RDFTYPE_3D_OBJECT, [obj])) {
          if (getter("is_low_polygons")) {
            tags.push(msg("Low-poly (<10k polygones)"));
          }
          if (getter("ai")) {
            tags.push(msg("AI-generated"));
          }
          if (getter("texture")) {
            tags.push(getter("texture"));
          }
          location = getter("location")?.country;
        }

        let images = getter("images", "image");
        if (!Array.isArray(images)) images = [images];
        images = images.filter((p: rdf.Image) => p?.url && !p?.iframe);

        let language = getter("language", "original_languages", "prices");
        if (typeof language !== "string") {
          language = language?.name || "";
        }

        const cardProps: TemsCardCatalogProps = {
          backgroundImg: this.hasType(rdf.RDFTYPE_PROVIDER, [obj])
            ? false
            : images?.filter((p: rdf.Image) => p?.url && !p?.iframe)?.[0]?.url,
          orgLogo: this.hasType(rdf.RDFTYPE_PROVIDER, [obj])
            ? images?.filter((p: rdf.Image) => p?.url && !p?.iframe)?.[0]?.url
            : getter("providers")?.filter(
                (p: rdf.Provider) => p.image?.url && !p.image?.iframe
              )?.[0]?.image?.url,
          logoOnTop: !this.hasType(rdf.RDFTYPE_OBJECT, [obj]),
          badge:
            !objectsAreSameType && this.hasType(rdf.RDFTYPE_OBJECT, [obj])
              ? this._typeToString([getter("@type")].flat())
              : firstCategory,
          tags: tags.filter((t) => t),
          header: getter("name", "title"),
          content: getter("description"),
          isFullSize: true,
          date: this.hasType(rdf.RDFTYPE_3D_OBJECT, [obj])
            ? getter("licences")
                ?.map((l: rdf.Licence) => l.name)
                .join(", ")
            : getter("publication_date", "release_date", "creation_date"),
          language: language,
          address: location,
          source: this.hasType(rdf.RDFTYPE_OBJECT, [obj])
            ? getter("affiliation")?.name ||
              getter("providers")
                ?.map((p: rdf.Provider) => p.name)
                .join(", ")
            : "",
        };

        return { ...cardProps, original: obj };
      });
    }
  }

  render() {
    if (!this._displayObjects || this._displayObjects.length === 0) {
      return nothing;
    }

    return html`<div
      class="card-grid${this.view === "card" ? " card-grid-vertical" : ""}"
    >
      ${this._displayObjects.map((displayObj) => {
        return html`<tems-card-catalog
          .object=${import.meta.env.DEV ? displayObj.original : nothing}
          type=${this.view === "card" ? "card" : "horizontal"}
          background-img=${displayObj.backgroundImg || nothing}
          org-logo=${displayObj.orgLogo || nothing}
          .logoOnTop=${displayObj.logoOnTop || nothing}
          .badge=${displayObj.badge || nothing}
          .tags=${displayObj.tags || nothing}
          .header=${displayObj.header || nothing}
          .content=${displayObj.content || nothing}
          .isFullSize=${displayObj.isFullSize || nothing}
          date=${displayObj.date || nothing}
          language=${displayObj.language || nothing}
          address=${displayObj.address || nothing}
          source=${displayObj.source || nothing}
          @click=${() => this._handleClickEvent(displayObj.original)}
        ></tems-card-catalog>`;
      })}
    </div>`;
  }
}