//import StyleIt from "https://cdn.skypack.dev/styleit-api@1.1.6";
import StyleIt from "https://cdn.skypack.dev/pin/styleit-api@v1.1.6-67xkX8WylVJqtUKAa7it/mode=imports/optimized/styleit-api.js";

class Editor {
  constructor(target) {
    this.styleIt = new StyleIt(target); 
    this.onKeyDown = this.onKeyDown.bind(this);
    this.MODES = this.styleIt.MODES;
    this.cmds = {

      bold: () => {
        const { styleIt, MODES } = this;
        styleIt.execCmd("font-weight", "bold", MODES.Toggle);
      },
      underline: () => {
        const { styleIt, MODES } = this;
        styleIt.execCmd("text-decoration", "underline", MODES.Toggle);
      },
      strikeThrough: () => {
        const { styleIt, MODES } = this;
        styleIt.execCmd("text-decoration", "line-through", MODES.Toggle);
      },
      italic: () => {
        const { styleIt, MODES } = this;
        styleIt.execCmd("font-style", "italic", MODES.Toggle);
      },
      textAlign: (align) => {
        const { styleIt, MODES } = this;
        styleIt.execCmd("text-align", align, MODES.Extend, { target: "block" });
      },
      fontSize: (size) => {
        const { styleIt, MODES } = this;
        styleIt.execCmd("font-size", size, MODES.Extend);
      },
      textShadow: (value) => {
        const { styleIt, MODES } = this;
        styleIt.execCmd("text-shadow", value, MODES.Extend);
      },
      fontColor: (color) => {
        const { styleIt, MODES } = this;
        styleIt.execCmd("color", color, MODES.Extend);
      },
      formatBlock: (tagName) => {
        const { styleIt } = this;
        styleIt.formatBlock(tagName);
      },
      link: ({ href = "", ptrocol = "https" }) => {
        const { styleIt } = this;
        styleIt.link({ href, ptrocol });
      },
      unLink: () => {
        const { styleIt } = this;
        styleIt.unLink();
      },
      letterSpacing: (size) => {
        const { styleIt, MODES } = this;
        styleIt.execCmd("letter-spacing", size, MODES.Extend, {
          target: "block"
        });
      }
    };

    this.start();
  }
  dispatch() {}

  start() {
    const editor = this.createEditor();
    this.createBtns(editor);
    document.addEventListener("keydown", this.onKeyDown);
  }

  onKeyDown(event) {
    let isDetect = true;
    if (event.ctrlKey) {
      console.log(event.code);
      switch (event.code) {
        case "KeyB":
          this.cmds["bold"]();
          break;
        case "KeyS":
          this.cmds["strikeThrough"]();
          break;
        case "KeyU":
          this.cmds["underline"]();
          break;
        case "KeyI":
          this.cmds["italic"]();
          break;
        case "KeyZ":
        case "KeyY":
          break;
        default:
          isDetect = false;
          break;
      }
      if (isDetect) {
        event.preventDefault();
      }
    }
  }
  
  createBtns(parent) {
    [
      {
        icon: `<i class="fas fa-bold"></i>`,
        onClick: this.cmds["bold"]
      },
      {
        icon: `<i class="fas fa-underline"></i>`,
        onClick: this.cmds["underline"]
      },
      {
        icon: `<i class="fas fa-strikethrough"></i>`,
        onClick: this.cmds["strikeThrough"]
      },
      {
        icon: `<i class="fas fa-italic"></i>`,
        onClick: this.cmds["italic"]
      },
      {
        icon: `<i class="fas fa-align-left"></i>`,
        onClick: () => this.cmds["textAlign"]("left")
      },
      {
        icon: `<i class="fas fa-align-center"></i>`,
        onClick: () => this.cmds["textAlign"]("center")
      },
      {
        icon: `<i class="fas fa-align-right"></i>`,
        onClick: () => this.cmds["textAlign"]("right")
      },
      {
        icon: `<i class="fas fa-align-justify"></i>`,
        onClick: () => this.cmds["textAlign"]("justify")
      },
      {
        icon: `<i class="fa fa-list-ul"></i>`,
        onClick: () => this.cmds["formatBlock"]("li")
      },
      /*{
        icon: `<i class="fa fa-list-ol"></i>`,
        onClick: () => {
          this.cmds['formatBlock']('li');
        }
      },*/
      {
        icon: `18px`,
        onClick: () => this.cmds["fontSize"]("20px")
      },

      {
        icon: `24px`,
        onClick: () => this.cmds["fontSize"]("24px")
      },
      {
        icon: `32px`,
        onClick: () => this.cmds["fontSize"]("32px")
      },
      /*{
        icon: `<i style="text-shadow:1px 1px 2px red, 0 0 1em blue, 0 0 0.2em orange;" class="fas fa-font"></i>`,
        onClick: () =>
          this.cmds["textShadow"](
            " 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em orange"
          )
      },
      {
        icon: `<i style="text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;" class="fas fa-font"></i>`,
        onClick: () =>
          this.cmds["textShadow"]("1px 1px 1px #000,3px 3px 5px blue")
      },*/
      {
        icon: `<i style="color: black" class="fas fa-font"></i>`,
        onClick: () => {
          this.cmds["fontColor"]("black");
        }
      },
      {
        icon: `<i style="color: red" class="fas fa-font"></i>`,
        onClick: () => {
          this.cmds["fontColor"]("red");
        }
      },
      {
        icon: `<i style="color: blue" class="fas fa-font"></i>`,
        onClick: () => {
          this.cmds["fontColor"]("blue");
        }
      },
      {
        icon: `<i  class="fas fa-heading">1</i>`,
        onClick: () => {
          this.cmds["formatBlock"]("h1");
        }
      },

      {
        icon: `<i  class="fas fa-heading">3</i>`,
        onClick: () => {
          this.cmds["formatBlock"]("h3");
        }
      },
      {
        icon: `<i  class="fas">P</i>`,
        onClick: () => {
          this.cmds["formatBlock"]("p");
        }
      },
      {
        icon: `<i  class="fas fa-link"></i>`,
        onClick: () => {
          let _texteSelect = window.getSelection().toString().trim();
          let _textEmpty = _texteSelect == "";
          let _textValid = _texteSelect.indexOf(" ") < 0;
          let _textDomain = _texteSelect.split(".");
          let _textHasDomain = _textDomain.length > 1 && _textDomain.length < 3;

          console.log("Texte Selectionné :", _texteSelect);
          console.log("La sélection est vide :", _textEmpty);
          console.log("La sélection est valide :", _textValid);
          console.log("Le domaine de la sélection :", _textDomain);
          console.log("La selection a un domain :", _textHasDomain);
          // On met le lien ici
          //this.cmds["link"]({ href: "https://" + _texteSelect });
        }
      },
      {
        icon: `<i  class="fas fa-unlink"></i>`,
        onClick: () => {
          this.cmds["unLink"]();
        }
      }
    ].forEach((cmd) => {
      const btn = document.createElement("button");
      btn.className = "editor-cmd btn btn-dark";
      btn.innerHTML = cmd.icon;
      btn.onclick = cmd.onClick;
      parent.appendChild(btn);
    });
  }

  createEditor() {
    const editor = document.createElement("div");
    editor.classList.add("editor-holder");

    //document.body.prepend(editor);

    // v2
    const editorDiv = document.getElementById('edittools');
    editorDiv.appendChild(editor);

    return editor;
  }

}

const editorTag = document.getElementById("editor");

const styleItInstance = new Editor(editorTag);


styleItInstance.styleIt.on("inspect", (collectedStyles) => {
  console.log("styles", collectedStyles);
});

editorTag . addEventListener('clicke', (event) => {
  console.log(event);
  const viewTest = document.getElementById("viewtest");
  viewTest.innerHTML = event.target.innerHTML;
});

// Bouton publier
const btnPublie = document.getElementById('publie');

btnPublie.addEventListener(
  'click',
  (e) => {
    e.preventDefault();
    let _articleText = editorTag.innerHTML;

    console.log('Article :', _articleText);
  }
);