import { Editor } from "../main";
import { introduction, atelier, software_interface, shortcuts, code, mouse, interaction } from "./basics";
import { amplitude, effects, sampler, synths, filters, audio_basics } from "./learning/audio_engine";
import { lfos, functions, generators, variables, probabilities } from './patterns';
import { ziffers_basics, ziffers_scales, ziffers_rhythm, ziffers_algorithmic, ziffers_tonnetz, ziffers_syncing } from "./patterns/ziffers";
import { loading_samples } from "./learning/samples/loading_samples";
import { sample_banks } from "./learning/samples/sample_banks";
import { sample_list } from "./learning/samples/sample_list";
import { oscilloscope } from "./more/oscilloscope";
import { synchronisation } from "./more/synchronisation";
import { about } from "./more/about";
import { bonus } from "./more/bonus";
import { visualization } from "./more/visualization";
import { chaining } from "./patterns/chaining";
import { time } from "./learning/time/time";
import { linear_time } from "./learning/time/linear_time";
import { cyclical_time } from "./learning/time/cyclical_time";
import { long_forms } from "./learning/time/long_forms";
import { midi } from "./learning/midi";
import { osc } from "./learning/osc";
import { patterns } from "./patterns/patterns";
// Setting up the Markdown converter with syntax highlighting
import showdown from "showdown";
import showdownHighlight from "showdown-highlight";
import "highlight.js/styles/atom-one-dark-reasonable.min.css";
import { createDocumentationStyle } from "../DOM/DomElements";
showdown.setFlavor("github");

type StyleBinding = {
  type: string;
  regex: RegExp;
  replace: (match: string, p1: string) => string;
};

export const key_shortcut = (shortcut: string): string => {
  return `<kbd class="lg:px-2 lg:py-1.5 px-1 py-1 lg:text-sm text-xs font-semibold text-brightwhite bg-brightblack border border-black rounded-lg">${shortcut}</kbd>`;
};

export const makeExampleFactory = (application: Editor): Function => {
  const make_example = (
    description: string,
    code: string,
    open: boolean = false,
  ) => {
    const codeId = `codeExample${application.exampleCounter++}`;
    // Store the code snippet in the data structure
    application.api.codeExamples[codeId] = code;

    return `
<details ${open ? "open" : ""}>
  <summary >${description}
    <button class="ml-4 py-1 align-top text-base px-4 hover:bg-brightgreen bg-green inline-block text-selection_foreground" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
    <button class="py-1 text-base px-4 hover:brightyellow bg-yellow text-selection_foreground inline-block" onclick="app.api._stopDocExample()">&#x23f8;&#xFE0F; Pause</button>
    <button class="py-1 text-base px-4 hover:bg-brightmagenta bg-magenta text-selection_foreground inline-block" onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
  </summary>
  <pre><code class="hljs language-javascript">${code.trim()}</code></pre>
</details> `;
  };
  return make_example;
};

export const documentation_pages = [
  "introduction",
  "atelier",
  "sampler",
  "amplitude",
  "audio_basics",
  "filters",
  "effects",
  "interface",
  "interaction",
  "code",
  "time",
  "linear",
  "cyclic",
  "longform",
  "synths",
  "chaining",
  "patterns",
  "ziffers_basics",
  "ziffers_scales",
  "ziffers_rhythm",
  "ziffers_algorithmic",
  "ziffers_tonnetz",
  "ziffers_syncing",
  "midi",
  "osc",
  "functions",
  "generators",
  "lfos",
  "probabilities",
  "variables",
  "synchronisation",
  "mouse",
  "shortcuts",
  "about",
  "bonus",
  "oscilloscope",
  "sample_list",
  "loading_samples",
  "visualization"
];

export const documentation_factory = (application: Editor) => {
  /**
   * Creates the documentation for the given application.
   * @param application The editor application.
   * @returns An object containing various documentation sections.
   */
  application.api.codeExamples = {};

  return {
    introduction: introduction(application),
    atelier: atelier(application),
    interface: software_interface(application),
    interaction: interaction(application),
    code: code(application),
    time: time(application),
    linear: linear_time(application),
    cyclic: cyclical_time(application),
    longform: long_forms(application),
    synths: synths(application),
    filters: filters(application),
    chaining: chaining(application),
    patterns: patterns(application),
    ziffers_basics: ziffers_basics(application),
    ziffers_scales: ziffers_scales(application),
    ziffers_algorithmic: ziffers_algorithmic(application),
    ziffers_rhythm: ziffers_rhythm(application),
    ziffers_tonnetz: ziffers_tonnetz(application),
    ziffers_syncing: ziffers_syncing(application),
    midi: midi(application),
    osc: osc(application),
    lfos: lfos(application),
    variables: variables(application),
    probabilities: probabilities(application),
    functions: functions(application),
    generators: generators(application),
    shortcuts: shortcuts(application),
    amplitude: amplitude(application),
    effects: effects(application),
    sampler: sampler(application),
    mouse: mouse(application),
    oscilloscope: oscilloscope(application),
    audio_basics: audio_basics(application),
    synchronisation: synchronisation(application),
    bonus: bonus(application),
    visualization: visualization(application),
    sample_list: sample_list(application),
    sample_banks: sample_banks(application),
    loading_samples: loading_samples(application),
    about: about(),
  };
};



export const showDocumentation = (app: Editor): void => {
  const toggleElementVisibility = (elementId: string, shouldHide: boolean): void => {
    const element = document.getElementById(elementId);
    if (element) {
      element.classList.toggle("hidden", shouldHide);
    }
  };

  const applyStyleBindings = (style: Record<string, string>, updateContent: (bindings: StyleBinding[]) => void): void => {
    const bindings: StyleBinding[] = Object.keys(style).map((key) => ({
      type: "output",
      regex: new RegExp(`<${key}([^>]*)>`, "g"),
      replace: (_, p1) => `<${key} class="${style[key]}" ${p1}>`
    }));
    updateContent(bindings);
  };

  const appHidden = document.getElementById("app")?.classList.contains("hidden");
  if (appHidden) {
    toggleElementVisibility("app", false);
    toggleElementVisibility("documentation", true);
    app.exampleIsPlaying = false;
  } else {
    toggleElementVisibility("app", true);
    toggleElementVisibility("documentation", false);
    const style = createDocumentationStyle(app);
    applyStyleBindings(style, (bindings: StyleBinding[]) => updateDocumentationContent(app, bindings));
  }

  // Reset the URL to the base URL
  window.history.pushState({}, '', '/');
};

// export const showDocumentation = (app: Editor) => {
//   /**
//    * Shows or hides the documentation based on the current state of the app.
//    * @param app - The Editor instance.
//    */
//   if (document.getElementById("app")?.classList.contains("hidden")) {
//     document.getElementById("app")?.classList.remove("hidden");
//     document.getElementById("documentation")?.classList.add("hidden");
//     app.exampleIsPlaying = false;
//   } else {
//     document.getElementById("app")?.classList.add("hidden");
//     document.getElementById("documentation")?.classList.remove("hidden");
//     // Load and convert Markdown content from the documentation file
//     let style = createDocumentationStyle(app);
//     function update_and_assign(callback: Function) {
//       let bindings = Object.keys(style).map((key) => ({
//         type: "output",
//         regex: new RegExp(`<${key}([^>]*)>`, "g"),
//         //@ts-ignore
//         replace: (match, p1) => `<${key} class="${style[key]}" ${p1}>`,
//       }));
//       callback(bindings)
//     }
//     update_and_assign((e: Object) => updateDocumentationContent(app, e));
//   }
// };

export const hideDocumentation = () => {
  /**
   * Hides the documentation section and shows the main application.
   */
  if (document.getElementById("app")?.classList.contains("hidden")) {
    document.getElementById("app")?.classList.remove("hidden");
    document.getElementById("documentation")?.classList.add("hidden");
  }
};

export const updateDocumentationContent = (app: Editor, bindings: any) => {
  /**
   * Updates the content of the documentation pane with the converted markdown.
   *
   * @param app - The editor application.
   * @param bindings - Additional bindings for the showdown converter.
   */
  let loading_message: string = "<h1 class='border-4 py-2 px-2 mx-48 mt-48 text-center text-2xl text-brightwhite'>Loading! <b class='text-red'>Clic to refresh!</b></h1>";
  const converter = new showdown.Converter({
    emoji: true,
    moreStyling: true,
    backslashEscapesHTMLTags: true,
    extensions: [showdownHighlight({
      pre: true,
      auto_detection: false
    }), ...bindings],
  });

  if (Object.keys(app.docs).length === 0) {
    app.docs = documentation_factory(app);
  }

  function _update_and_assign(callback: Function) {
    const converted_markdown = converter.makeHtml(
      app.docs[app.currentDocumentationPane],
    );
    callback(converted_markdown)
  }
  _update_and_assign((e: string) => {
    let display_content = e === undefined ? loading_message : e;
    document.getElementById("documentation-content")!.innerHTML = display_content;
  })
  if (document.getElementById("documentation-content")!.innerHTML.replace(/"/g, "'") == loading_message.replace(/"/g, "'")) {
    setTimeout(() => {
      updateDocumentationContent(app, bindings);
    }, 100);
  }
}