[--C0DE--]//:8123248186365035307:2275025064612300016: this is the blog id and post id

//document.head.querySelectorAll("link")[3].href.split("BlogID=")[1].split("&")[0]
//^^^ this will be used with getting the blogid and for sending my new jason back to be saved permanantly

let blogId = "";

const number_of_things_to_look_at =
  document.head.querySelectorAll("link").length;

for (let i = 0; i < number_of_things_to_look_at; i++) {
  if (document.head.querySelectorAll("link")[i].href.includes("BlogID=")) {
    console.log("IN");
    blogId = document.head
      .querySelectorAll("link")
      [i].href.split("BlogID=")[1]
      .split("&")[0];
    console.log("blogId", blogId);
  } else {
    console.log("blog NOT IN this link", i);
  }
}

const { div, input, label, select, option, style, textarea, button } = van.tags; //i have to tell what tags i will use.
// it turns these into functions, and I just pass in parameters
const globalData = JSON.parse(
  tag("post-json").innerHTML.split("[--C0" + "DE--]")[1]
);
const objectToSave = {};
console.log(globalData.pid);

function initialize() {
  const data = globalData;
  //gether information from the post
  console.log("this is a test for the interpreter.js file  ------ DATA", data);

  const css = style(
    `
    textarea {width: 390px; height 150px;}

    .container{display:grid;   grid-template-columns: 1fr 4fr; } 
    @media (max-width: 525px) {.container{grid-template-columns: 1fr;}} 

    .title{font-weight:bold;}
    .content{justify-self: left; width: 100%;}
    
    `
    //1fr 4fr is the column size distrabution
  );

  //add a css to the head
  document.head.appendChild(css);

  //make the html content
  const html = div(
    {},
    "Editing Interpreter",
    div(
      { style: "max-width: 500px;" },
      //these are making up the rows and then the columns
      div(
        { class: "container" },
        //----------imageUrl------------
        div({ class: "title" }, "imageUrl: "),
        div(
          { class: "content" },
          textarea({
            value: data.imageUrl,
            id: "imageUrl",
            oninput: checkDirty,
          })
        )
      ),
      div(
        { class: "container" },
        //----------pid------------
        div({ class: "title" }, "pid: "),
        div(
          { class: "content" },
          input({ value: data.pid, id: "pid", oninput: checkDirty })
        )
      ),

      //-----------------------------
      //----------------------------- todo: fix the check dirty on this, low priority
      div(
        { class: "container" },

        //----------findable------------
        div({ class: "title" }, "findable: "),
        div(
          { class: "content" },
          label(
            { for: "findable" },

            select(
              {
                name: "findable",
                id: "findable",

                oninput: checkDirty,
              },
              option(
                { value: "true", selected: data.findable === true },
                "True"
              ),
              option(
                { value: "false", selected: data.findable === false },
                "False"
              )
            )
          )
        )
      ),
      //-----------------------------
      //-----------------------------

      div(
        { class: "container" },
        //----------meet------------
        div({ class: "title" }, "meet: "),
        div(
          { class: "content" },
          textarea({
            value: data.meet,
            id: "meet",
            oninput: checkDirty,
          })
        ),
        button({ onclick: save }, "Save")
      )
    )
  );
  //add that to the custom named div 'canvas'
  tag("canvas").appendChild(html);
}

function tag(id) {
  return document.getElementById(id);
}

function checkDirty(evt) {
  element = evt.target;
  value = element.value;
  key = element.id;
  if (globalData[key] === value) {
    //reomve dirty
    element.classList.remove("dirty");
  } else {
    //add dirty
    element.classList.add("dirty");
  }
}

function save() {
  //gets all the values, appends them to objectToSave and parses that into JSON
  objectToSave.findable = tag("findable").value === "true" ? true : false;
  objectToSave.imageUrl = tag("imageUrl").value;
  objectToSave.meet = tag("meet").value;
  objectToSave.pid = tag("pid").value;

  jsonToSave = JSON.stringify(objectToSave);
  console.log(jsonToSave);
}

initialize();
[--C0DE--]