import { OrbitComponent, setupCacheInvalidation } from "@helpers";
import { localized, msg } from "@lit/localize";
import { Task } from "@lit/task";
import type { LimitedResource, MenuEntry, Resource } from "@src/tems.d.ts";
import ComponentStyle from "@styles/navbar/tems-sidebar.scss?inline";
import { css, nothing, unsafeCSS } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { html, unsafeStatic } from "lit/static-html.js";

import "~icons/fluent/apps-16-filled";
import "~icons/material-symbols/shopping-cart-outline";
import "~icons/mage/globe-fill";
import "~icons/mingcute/bookmark-line";
import "~icons/mingcute/notification-line";
import "~icons/mingcute/search-3-line";

export type TemsSidebarProps = object;

@customElement("tems-sidebar")
@localized()
export class TemsSidebar extends OrbitComponent {
  static styles = css`
    ${unsafeCSS(ComponentStyle)}
  `;

  @property({ attribute: "flag-src" })
  flagSrc?: string;

  @state()
  ready = false;

  @state()
  openFooter = false;

  @state()
  categories: string[] = [];

  @state()
  entries: MenuEntry = {};

  cherryPickedProperties = [
    { key: "@id", value: "@id" },
    { key: "@type", value: "@type" },
    { key: "name", value: "name" },
    { key: "first_name", value: "first_name" },
    { key: "last_name", value: "last_name" },
    { key: "picture", value: "picture" },
    { key: "owned_objects", value: "owned_objects", expand: true },
    { key: "account", value: "account", expand: true },
    { key: "status", value: "status" },
  ];

  async _responseAdaptator(response: Resource): Promise<Resource> {
    if (response.owned_objects) {
      response.owned_objects = (
        await Promise.all(
          response.owned_objects._originalResource.map(
            async (obj: LimitedResource) =>
              await this._getProxyValue(obj["@id"])
          )
        )
      ).flat();
    }

    return response;
  }

  _afterAttach() {
    setupCacheInvalidation(this, {
      keywords: ["groups"],
    });

    const categories: Set<string> = new Set();
    const entries: MenuEntry = {};

    if (this.orbit) {
      for (const menuEntry of this.orbit.components) {
        if (
          menuEntry?.integration?.includes("menu") &&
          menuEntry.parameters.menu
        ) {
          const category = menuEntry?.parameters?.menu?.category;
          if (category) {
            categories.add(category);
          }
          menuEntry.parameters.menu.route = menuEntry.route;
          menuEntry.parameters.menu.dataSrc =
            menuEntry.parameters.defaultDataSrc !== "federation"
              ? menuEntry.parameters.defaultDataSrc
              : menuEntry.instance?.defaultDataSrc;
          menuEntry.parameters.menu.uniq = menuEntry.uniq;
          entries[category] ??= [];
          entries[category].push(menuEntry?.parameters?.menu);
        }
      }
    }

    this.entries = entries;
    this.categories = Array.from(categories);

    return Promise.resolve();
  }

  protected _getUser = new Task(this, {
    task: async ([dataSrc, flagSrc]) => {
      if (!dataSrc || !flagSrc) return;
      this.enabledFeatureFlags = await this._getProxyValue(flagSrc);
      if (this.enabledFeatureFlags) {
        this.enabledFeatureFlags = this.enabledFeatureFlags
          .map((flag: Resource) =>
            typeof flag.status !== "undefined"
              ? flag.status
                ? flag.name
                : ""
              : flag.name
          )
          .filter((flag: string) => flag);
      }
      this.user = await this._getProxyValue(dataSrc);
      this.ready = true;
      this.dispatchEvent(new CustomEvent("user-ready"));

      const entries: MenuEntry = {};

      for (const category of this.categories) {
        for (const menuEntry of this.entries[category]) {
          const featureFlags = menuEntry.featureflags;

          if (
            !(
              featureFlags?.every((flag: string) =>
                this.enabledFeatureFlags.includes(flag)
              ) || !featureFlags
            )
          ) {
            menuEntry.skip = true;

            const toDisableComponent = window.orbit.components.find(
              (c) => c.uniq === menuEntry.uniq
            );

            if (toDisableComponent) {
              window.orbit.components = window.orbit.components.filter((c) =>
                c.parameters?.tabGroup
                  ? c.parameters.tabGroup !==
                    toDisableComponent.parameters?.tabGroup
                  : true
              );
            }
          }
        }

        const categoryEntries = this.entries[category].filter(
          (entry) => !entry.skip
        );

        if (categoryEntries.length > 0) {
          entries[category] = categoryEntries;
        }
      }

      const categories = this.categories.filter((category) => {
        return entries[category]?.length > 0;
      });

      return {
        user: this.user,
        categories: categories,
        entries: entries,
      };
    },
    args: () => [this.dataSrc, this.flagSrc, this.caching],
  });

  _toggleFooter() {
    this.openFooter = !this.openFooter;
  }

  _logout() {
    document.querySelector("sib-auth")?.logout();
  }

  render() {
    if (!this.orbit || !this.dataSrc) return nothing;

    return this._getUser.render({
      pending: () => html`<solid-loader position="menu"></solid-loader>`,
      complete: (d) => {
        if (!d) {
          return nothing;
        }

        const { user, categories, entries } = d;

        for (const category of categories) {
          for (const entry of entries[category]) {
            entry.active = this.currentRoute
              ? entry.route === this.currentRoute ||
                entry.alternate?.includes(this.currentRoute)
              : false;
          }
        }

        return html`<main>
          <header>
            <div>
              <img
                src="${this.orbit?.client?.logo}"
                alt="${this.orbit?.client?.name}"
              />
            </div>
            <div>
              <div>
                ${entries["none"]?.map((entry) => {
                  return html`<tems-sidebar-item
                    label=${entry.name}
                    .icon=${entry.icon
                      ? html`<${unsafeStatic(
                          `icon-${entry.icon}`
                        )}></${unsafeStatic(`icon-${entry.icon}`)}>`
                      : nothing}
                    active=${!!entry.active || nothing}
                    disabled=${!!entry.disabled || nothing}
                    @click=${this._navigate}
                    navigation-target=${entry.uniq}
                    navigation-resource=${entry.dataSrc || nothing}
                  >
                  </tems-sidebar-item>`;
                })}
              </div>
              ${categories
                .filter((category) => category !== "none")
                .map((category) => {
                  return html`<div>
                    <tems-sidebar-section>
                      <h3 slot="label">${category}</h3>
                      ${entries[category].map((entry) => {
                        return html`<tems-sidebar-item
                          label=${entry.name}
                          .icon=${entry.icon
                            ? html`<${unsafeStatic(
                                `icon-${entry.icon}`
                              )}></${unsafeStatic(`icon-${entry.icon}`)}>`
                            : nothing}
                          active=${!!entry.active || nothing}
                          disabled=${!!entry.disabled || nothing}
                          @click=${this._navigate}
                          navigation-target=${entry.uniq}
                          navigation-resource=${entry.dataSrc || nothing}
                        >
                        </tems-sidebar-item>`;
                      })}
                      ${category === "Services"
                        ? html` <tems-sidebar-item
                            label="ISAN APP"
                            .icon=${html`<icon-fluent-apps-16-filled></icon-fluent-apps-16-filled>`}
                            @click=${() => {
                              window.open(
                                "https://ina.demo.isan.org/",
                                "_blank"
                              );
                            }}
                          >
                          </tems-sidebar-item>`
                        : nothing}
                    </tems-sidebar-section>
                  </div>`;
                })}
            </div>
          </header>
          <footer @click=${this._toggleFooter}>
            ${this.openFooter
              ? html`<div class="logout">
                  <button @click=${this._logout}>
                    ${msg("Use another identity")}
                  </button>
                </div>`
              : nothing}
            <tems-profile-card
              .user=${user}
              active=${this.openFooter || nothing}
            ></tems-profile-card>
          </footer>
          <div class="powered-by">
            <p>${msg("Powered by")}</p>
            <img src="https://cdn.startinblox.com/logos/tems-logo-black.svg" />
          </div>
          <div class="powered-by">
            <img
              src="https://cdn.startinblox.com/tems/cofund.png"
              style="width: 100%;height: auto;"
            />
          </div>
        </main>`;
      },
    });
  }
}