import type { AddComponentTypeOptions, BlockProperties, Editor } from "grapesjs";

export function configureEditor(editor: Editor): void {
  //editor.Panels.getPanel("devices-c")?.set("visible", false);
  editor.Panels.removeButton("devices-c", "set-device-mobile");
  editor.Panels.removeButton("devices-c", "set-device-desktop");
  editor.Panels.removeButton("views", "open-tm");
  editor.Panels.removeButton("views", "open-layers");
  editor.Panels.removeButton("options", "export-template");
  editor.Panels.removeButton("options", "preview");
  // editor.Panels.removeButton("options", "fullscreen");
  editor.Panels.removeButton("options", "gjs-open-import-template");
  editor.Panels.removeButton("options", "gjs-toggle-images");
  editor.BlockManager.remove("button");
  editor.BlockManager.remove("image");
  editor.BlockManager.remove("link-block");
  editor.BlockManager.remove("list-items");
  editor.BlockManager.remove("grid-items");
  editor.BlockManager.remove("sect37");
  editor.BlockManager.remove("text-sect");

  editor.BlockManager.get("text").set("category", "Text");
  editor.BlockManager.get("quote").set("category", "Text");
  editor.BlockManager.get("link").set("category", "Text");
  editor.BlockManager.get("sect100").set("category", "Struktur");
  editor.BlockManager.get("sect50").set("category", "Struktur");
  editor.BlockManager.get("sect30").set("category", "Struktur");
  editor.BlockManager.get("divider").set("category", "Struktur");
  editor.BlockManager.add("heading1-block", heading1_block);
  editor.BlockManager.add("heading2-block", heading2_block);
  editor.BlockManager.add("heading3-block", heading3_block);
  editor.BlockManager.add("list_start", list_start_block);
  editor.DomComponents.addType("list_end", list_end_block.type);
  editor.BlockManager.add("list_end", list_end_block.block);
  editor.BlockManager.add("list-block", list_block);
  editor.BlockManager.add("list-inner-block", list_inner_block);
}

const heading1_block: BlockProperties = {
  label: "Heading1",
  category: "Text",
  media: `
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501m4.501-8.627 2.25-1.5v10.126m0 0h-2.25m2.25 0h2.25" />
    </svg>
  `,
  content: `
    <h1 class="heading">Heading 1</h1>
  `,
};

const heading2_block: BlockProperties = {
  label: "Heading2",
  category: "Text",
  media: `
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
      <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 19.5H16.5v-1.609a2.25 2.25 0 0 1 1.244-2.012l2.89-1.445c.651-.326 1.116-.955 1.116-1.683 0-.498-.04-.987-.118-1.463-.135-.825-.835-1.422-1.668-1.489a15.202 15.202 0 0 0-3.464.12M2.243 4.492v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" />
    </svg>
  `,
  content: `
    <h2 class="heading">Heading 2</h2>
  `,
};

const heading3_block: BlockProperties = {
  label: "Heading3",
  category: "Text",
  media: `
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M20.905 14.626a4.52 4.52 0 0 1 .738 3.603c-.154.695-.794 1.143-1.504 1.208a15.194 15.194 0 0 1-3.639-.104m4.405-4.707a4.52 4.52 0 0 0 .738-3.603c-.154-.696-.794-1.144-1.504-1.209a15.19 15.19 0 0 0-3.639.104m4.405 4.708H18M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" />
    </svg>
  `,
  content: `
    <h3 class="heading">Heading 3</h3>
  `,
};

const list_start_block: BlockProperties = {
  label: "Anfang WDH",
  category: "Struktur",
  media: `
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
    </svg>
  `,
  content: `
    <liststart style="font-style: italic; display: block;">
      WDH Start: LISTENNAME 
    </liststart>
  `,
};

const list_end_block: { type: AddComponentTypeOptions; block: BlockProperties } = {
  type: {
    model: {
      defaults: {
        tagName: "listend",
        content: "WDH ENDE",
        editable: false,
      },
    },
    isComponent(el) {
      return el.tagName === "listend";
    },
  },
  block: {
    label: "Ende WDH",
    content: { type: "list_end" },
    category: "Struktur",
    media: `
      <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
      </svg>
    `,
  },
};

const list_block: BlockProperties = {
  label: "Liste",
  category: "Struktur",
  media: `
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
    </svg>
  `,
  content: `
    <ul>
      <li>Element</li>
    </ul>
  `,
};

const list_inner_block: BlockProperties = {
  label: "Listenelement",
  category: "Text",
  media: `
    <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
    </svg>
  `,
  content: `
    <li>Element</li>
  `,
};