import type { UpEntry } from "upend";
import Gallery from "../components/widgets/Gallery.svelte";

export class UpType {
  address: string | undefined;
  name: string | null = null;
  label: string | null = null;
  attributes: string[] = [];

  constructor(address?: string) {
    this.address = address;
  }

  public get icon(): string | undefined {
    return this.name ? TYPE_ICONS[this.name] : undefined;
  }

  public get widgetInfo(): Widget[] {
    return TYPE_WIDGETS[this.name] || [];
  }
}

export const UNTYPED = new UpType();

export interface Component {
  component: any; // TODO
  props?:
    | { [key: string]: unknown }
    | ((entries: UpEntry[]) => { [key: string]: unknown });
}

export interface Widget {
  name: string;
  icon?: string;
  components: Array<Component>;
}

const TYPE_ICONS: { [key: string]: string } = {
  BLOB: "package",
  HIER: "folder",
};

const TYPE_WIDGETS: { [key: string]: Widget[] } = {
  HIER: [
    {
      name: "hierarchical-listing",
      icon: "folder",
      components: [
        {
          component: Gallery,
          props: (entries) => {
            return {
              thumbnails: false,
              entities: entries
                .filter((e) => e.attribute == "HAS")
                .map((e) => String(e.value.c)),
            };
          },
        },
      ],
    },
    {
      name: "hierarchical-listing-gallery",
      icon: "image",
      components: [
        {
          component: Gallery,
          props: (entries) => {
            return {
              thumbnails: true,
              entities: entries
                .filter((e) => e.attribute == "HAS")
                .map((e) => String(e.value.c)),
            };
          },
        },
      ],
    },
  ],
  KSX_TRACK_MOODS: [
    {
      name: "ksx-track-compass",
      icon: "plus-square",
      components: [
        // {
        //   name: "Compass",
        //   id: "compass_tint_energy",
        //   props: {
        //     xAttrName: "KSX_TINT",
        //     yAttrName: "KSX_ENERGY",
        //     xLabel: "Lightsoft // Heavydark",
        //     yLabel: "Chill // Extreme",
        //   },
        // },
        // {
        //   name: "Compass",
        //   id: "compass_seriousness_materials",
        //   props: {
        //     xAttrName: "KSX_SERIOUSNESS",
        //     yAttrName: "KSX_MATERIALS",
        //     xLabel: "Dionysia // Apollonia",
        //     yLabel: "Natural // Reinforced",
        //   },
        // },
      ],
    },
  ],
};
