import { html, LitElement, nothing } from "lit";
import { customElement, state, property } from "lit/decorators.js";
import { PublisherManager } from "@supersoniks/concorde/utils";
import { tailwind } from "../tailwind";
import search from "./docs-search.json";
import "@supersoniks/concorde/core/components/ui/divider/divider";
import "@supersoniks/concorde/core/components/ui/icon/icon";
import "@supersoniks/concorde/core/components/ui/menu/menu";
import "@supersoniks/concorde/core/components/ui/pop/pop";
import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";

import { FormElementInterface } from "@supersoniks/concorde/core/mixins/FormElement";
import { Pop } from "@supersoniks/concorde/core/components/ui/pop/pop";

const tagName = "docs-search"; // For Astro.build
const win: any = window;
const fuzzysort = win.fuzzysort;
@customElement(tagName)
export class DocsSearch extends LitElement {
  static styles = [tailwind, customScroll];
  @state({ type: Boolean }) hidePopMenu = false;
  @property({ type: Boolean }) setFocus = false;
  search(val) {
    // if (!val || val.length < 3) {
    //   this.hidePopMenu = true;
    //   return null;
    // } else this.hidePopMenu = false;
    PublisherManager.get("searchSelection").selection = null;
    const searchResult = fuzzysort.go(val, search, { key: "search" });
    const resultForList: Array<any> = [];
    const titlesToContent: Map<string, any> = new Map();

    const found: Array<string> = [];
    for (const result of searchResult) {
      if (result.score < -100000) continue;

      const obj = result.obj;

      for (const file in obj.files) {
        for (const part in obj.files[file].hashes) {
          const hash = obj.files[file].hashes[part];
          if (found.includes(file + ":" + part)) continue;
          found.push(file + ":" + part);
          const title = obj.files[file].title;
          const subItem = {
            href: "#" + file + "/" + part,
            part: hash.title || "...",
            search:
              hash.type == "page" ? "Page" : this.getResultSearchString(result),
            index: search.indexOf(obj),
            template: hash.type == "page" ? "page" : null,
          };
          if (!titlesToContent.has(title)) {
            const item: any = {
              title: title,
              items: [subItem],
            };
            titlesToContent.set(title, item);
            resultForList.push(item);
          } else {
            const item = titlesToContent.get(title);
            item.items.push(subItem);
          }
        }
      }
    }
    (this.shadowRoot?.querySelector("sonic-pop") as Pop)?.show();
    // this.hidePopMenu = resultForList.length == 0;
    for (const item of resultForList) {
      item.items.sort((a, b) => a.index - b.index);
    }
    PublisherManager.get("searchResult").set(resultForList);
  }
  getResultSearchString(result: any) {
    const p = result.p;
    const str = result.target
      .split("")
      .map((value, index) =>
        p.includes(index)
          ? "<span class='font-bold' style='color:var(--sc-info)'>" +
            value +
            "</span>"
          : value
      )
      .join("");
    return str;
  }
  connectedCallback() {
    PublisherManager.get("docsSearch").search.onAssign((v) => this.search(v));
    super.connectedCallback();
  }

  firstUpdated() {
    if (this.setFocus) {
      setTimeout(() => {
        const input = this.shadowRoot?.querySelector(
          "sonic-input"
        ) as FormElementInterface;
        input?.focus();

        (this.shadowRoot?.querySelector("sonic-pop") as Pop)?.show();
      }, 100);
    }
  }

  render() {
    return html`
      <sonic-pop noToggle class="inline-block w-full" key="data">
        <sonic-input
          data-keyboard-nav="doc-search"
          type="search"
          formDataProvider="docsSearch"
          name="search"
          autocomplete="off"
          inlineContent
          placeholder="Quick search..."
        >
          <sonic-icon
            library="iconoir"
            name="search"
            slot="prefix"
            size="lg"
          ></sonic-icon>
        </sonic-input>
        ${this.hidePopMenu
          ? nothing
          : html`
              <sonic-menu
                slot="content"
                class="max-w-[40rem] max-h-[50vh] overflow-auto  custom-scroll !left-0 !top-0 !relative"
              >
                <sonic-list displayContents dataProvider="searchResult">
                  <template>
                    <div class="my-4">
                      <div class="ml-3 mr-3 mb-1">
                        <sonic-value
                          key="title"
                          class="font-bold text-lg "
                        ></sonic-value>
                      </div>
                      <sonic-list subDataProvider="items">
                        <template data-value="page">
                          <sonic-menu-item
                            formDataProvider="searchSelection"
                            data-keyboard-nav="search-results doc-search"
                            class="mt-1"
                          >
                            <sonic-icon
                              slot="prefix"
                              size="lg"
                              library="heroicons"
                              name="book-open"
                            ></sonic-icon>
                            <div>
                              <sonic-value
                                key="search"
                                class="block font-medium "
                              ></sonic-value>
                            </div>
                            <sonic-icon
                              slot="suffix"
                              size="lg"
                              library="heroicons"
                              name="chevron-right"
                              class="opacity-40"
                            ></sonic-icon>
                          </sonic-menu-item>
                        </template>
                        <template>
                          <sonic-menu-item
                            formDataProvider="searchSelection"
                            data-keyboard-nav="search-results doc-search"
                            class="mt-1"
                          >
                            <div>
                              <sonic-badge size="xs" ellipsis class="mb-1">
                                <sonic-value
                                  key="part"
                                  class="block "
                                ></sonic-value>
                              </sonic-badge>
                              <sonic-value
                                key="search"
                                class="block text-sm  font-normal pl-[.75rem]"
                              ></sonic-value>
                            </div>
                            <sonic-icon
                              slot="suffix"
                              size="lg"
                              library="heroicons"
                              name="chevron-right"
                              class="opacity-40"
                            ></sonic-icon>
                          </sonic-menu-item>
                        </template>
                      </sonic-list>
                    </div>
                  </template>
                </sonic-list>
              </sonic-menu>
            `}
      </sonic-pop>
    `;
  }
}