const style = document.createElement("style");
style.id = "kform-closure-style";
style.textContent = `

  `;

async function main() {
  const params = new URLSearchParams(window.location.search);
  const ItemID = params.get("ItemID");
  var ProjectID = "";
  var ProjectDeputy = "";
  var ProjectManagement = "";
  if (ItemID != "NewItem") {
    var Closure = await getItemFromList("/pmo/", "Closure", ItemID);
    ProjectID = Closure.ProjectNameId;
    ProjectDeputy = Closure.DeputyId;
    ProjectManagement = Closure.ManagementId;
    SetGlobalVariable([
      ["ProjectID", ProjectID],
      ["ProjectDeputy", ProjectDeputy],
      ["ProjectManagement", ProjectManagement],
    ]);
  }

  SetGlobalVariable([
    ["SiteUrl", "/pmo"],
    ["ListName", "Closure"],
  ]);

  createFormUI({
    container: "Form",
    sidebar: [
      {
        label: "مقدمه",
        icon: "/pmo/KForm/Images/Picture1.png",
      },
      {
        label: "زمان",
        icon: "/pmo/KForm/Images/Picture2.png",
      },
      {
        label: "محدوده",
        icon: "/pmo/KForm/Images/Picture3.png",
      },
      {
        label: "تجارب",
        icon: "/pmo/KForm/Images/Picture4.png",
      },
      {
        label: "ریسک",
        icon: "/pmo/KForm/Images/Picture5.png",
      },
    ],
    steps: {
      1: ["پروژه", "اهداف", "تغییرات"],
      2: ["زمانبندی", "رویدادها"],
      3: ["دامنه", "تحولی شدنی ها", "معیارهای خاتمه پروژه"],
      4: ["آموزش", "دروس آموخته"],
      5: ["ریسک های حین اجرا", "ریسک های عدم اجرا", "ریسک های پس از اجرا"],
    },
  });

  var save_btn = document.createElement("button");
  save_btn.style.backgroundImage =
    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC30lEQVR4nO2cS27UQBRF7wRvAQHp/RCxkURkcUh8JJgDESQMEWPCCkhmDApZMhOrm+7qKr86rr5HqkkiO/fWSf/c1pOMMcYYY4wxhssg6UrStaQHSemE1h9JHyQ9FoSnkr4BNiY1Xt8JUsZHhmWII+UKsAkJtppKuZ6FeSPpWcbx8zJrIVGl3M+CnGUe34uQ1xQppRvai5BB0qstP/8xvelpFiz6+FZsy42QsnYhLyT9+s9rwZ2k84zcQ+unr7ULuTvgBfpnZu6mUtYuJB24cnM3e/qyEO3M3URKb0L+UUNIEykWor25Q6VYiA7KHSbFQnRw7hApFqKs3ItLsRBl5971OeV9YZfiYDWOX6OQXVLGbx6LsRAdnXtYor+FqCi3hcywkKUDFf79XWvfccdiITMsZOlAgMvvOVjIjPM9UkYZz+cHWQiPZCEsuhXyu/A2ohZsZpnHDt0Imd9o9xYuZSPp3Szzp56EvMx465mg66Lh/lU/4Xg95xawqenI9UXSo4b7t8gJn0i6AWxuylxfp+yt92+RE47/ZZeSPm65X5i07qeMF4WPjNr7t9wJT4xkISwsBIaFwLAQGBYCw0JgWAgMC4FhITCwQtY2K+VB0ufpavUA2L+qJ1z7rJTbgouMOCG9zEq5OfJiI05IT7NSLhvsX/UTls5KacXZ9HVz6Ve5OCGls1LWfrMDTkj1QMHg+uMCBYPrjwsUDK4/LlAwuP64QMHg+uMCBYPrjwsUDK4/LlAwuP64QMHg+uMCBYPrjwsUDK4/LlAwuP64QMHg+uMCBYPrjwsUDK4/LlAwuP64QMHg+uMCBYPrjwsUDK4/LlAwuP64QMHg+uMCBYPrv++Epb+nk2j9cYGCwfXHBQoG1x8XKBhcf9yLWjC4/rhAweD6l06EO2Uhm4qT6apNhDtVIZvKk+m6mgiXOphM181EuNTJZLouJsKljibTrXYiXOp0Mp0xxhhjjDHGaAn+AqQCw1hP6NhdAAAAAElFTkSuQmCC)";
  save_btn.style.position = "absolute";
  save_btn.style.top = 0;
  save_btn.style.left = 0;
  save_btn.style.backgroundPosition = "center";
  save_btn.style.backgroundRepeat = "no-repeat";
  save_btn.style.width = "60px";
  save_btn.style.height = "60px";
  save_btn.style.margin = "0";
  save_btn.style.backgroundSize = "contain";
  save_btn.style.border = "none";
  save_btn.style.transform = "scale(0.4)";
  save_btn.style.backgroundColor = "transparent";
  save_btn.style.cursor = "pointer";
  save_btn.style.padding = "0";
  save_btn.addEventListener("click", (event) => {
    event.preventDefault();
    K_Save(true, "/pmo/", "Closure");
  });
  document.getElementsByClassName("content-area")[0].appendChild(save_btn);

  var next_step_btn = document.createElement("button");
  next_step_btn.style.backgroundImage =
    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC4UlEQVR4nO2ZPW4TURSFRyAhkJAoaaGHEiTYALAAt2wBubIs+72TkpYtsAXXyQaSBZjarSUXoBRB8kMhgzwKcuKfO3PPvHc+6fR37tEd+7OrSgghhBBCCCGEEBkD4K33DKJBjHEN4Pt4PH7uPYu4uZBU5xeAEwCPvGcqmkYhfxNj/BFC+OQ9V7HcLqRRzGwymbz0nq84thVS5xLAVwBPvecshnsK+XctCwCfvWctgl0KaeRsOp2+9p45a/Ys5PpafscYv41Go2fes2fJvoU0sowxfhkMBg+9nyErjigk1bkA8N77ObLBoJAk2ycrBJtifsr2iQpBw/YBfPR+tl7SRiHYFCPbZyoEN5HtkxWS6muR7TMVgk3OALzyfm5aHApJsn2yQnDL9gE88N4DDc6FpDoXIYR33ruggKCMVL/GZPvXeBeB/4sp2/a9C8D2Ysq0fe/F4/5iyrJ974Vjt5Rj+wTLTntcS/62771kHJZ8bZ9guenAa8nT9r0Xi+OTl+0TLDQZJQ/bJ1hkskoWtu+9RLRTzCrGOOql7XsvD+1m3jvbJ1ha6uBi+mP73stCd+mH7RMsKnV8Ldy2770g+IXT9gkWkxyvhc/2vZcCjvDYPsEyEkFUCAiiVxZ4EmM81Yc6/KOvvaASw5PhcPikYqaQq5gBeFH1Ae9lod3ox0UQRD+/gyP6gwpU0V+44AiPZVtAsNB0YK7oLNsCgsWmbCzbgp4VsaC2bAu8l4ycLNuCHlzFrDeWbYH3wrE98xDCh6o0CC9i1VvLtoCoiHXvLdsCkjLOs7BsC5zLWGZl2RY4FXGVpWVb4PB6Os3Wsi3osIhF9pZtQQdlXBZj2Ra0fBWzoizbgpbKmBdp2RYYX8SqaMu2wKiItSzbCIMyzmXZhhxRxlKW3QIHFCHLbpM9X0+y7LbZsQhZdlfsYtkAHnc2UOnccRWybA9k2WTIssmQZZMRQnjjPYMQQgghhBBCCCFEZcIfdJ1SYekvaZ0AAAAASUVORK5CYII=)";
  next_step_btn.style.position = "absolute";
  next_step_btn.style.bottom = 0;
  next_step_btn.style.left = 0;
  next_step_btn.style.backgroundPosition = "center";
  next_step_btn.style.backgroundRepeat = "no-repeat";
  next_step_btn.style.width = "60px";
  next_step_btn.style.height = "60px";
  next_step_btn.style.margin = "0";
  next_step_btn.style.marginLeft = "-10px";
  next_step_btn.style.backgroundSize = "contain";
  next_step_btn.style.border = "none";
  next_step_btn.style.transform = "rotate(180deg) scale(0.6)";
  next_step_btn.style.backgroundColor = "transparent";
  next_step_btn.style.cursor = "pointer";
  next_step_btn.style.padding = "0";
  next_step_btn.addEventListener("click", (event) => {
    event.preventDefault();
    goForward();
  });

  var previous_step_btn = document.createElement("button");
  previous_step_btn.style.backgroundImage =
    "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC4UlEQVR4nO2ZPW4TURSFRyAhkJAoaaGHEiTYALAAt2wBubIs+72TkpYtsAXXyQaSBZjarSUXoBRB8kMhgzwKcuKfO3PPvHc+6fR37tEd+7OrSgghhBBCCCGEEBkD4K33DKJBjHEN4Pt4PH7uPYu4uZBU5xeAEwCPvGcqmkYhfxNj/BFC+OQ9V7HcLqRRzGwymbz0nq84thVS5xLAVwBPvecshnsK+XctCwCfvWctgl0KaeRsOp2+9p45a/Ys5PpafscYv41Go2fes2fJvoU0sowxfhkMBg+9nyErjigk1bkA8N77ObLBoJAk2ycrBJtifsr2iQpBw/YBfPR+tl7SRiHYFCPbZyoEN5HtkxWS6muR7TMVgk3OALzyfm5aHApJsn2yQnDL9gE88N4DDc6FpDoXIYR33ruggKCMVL/GZPvXeBeB/4sp2/a9C8D2Ysq0fe/F4/5iyrJ974Vjt5Rj+wTLTntcS/62771kHJZ8bZ9guenAa8nT9r0Xi+OTl+0TLDQZJQ/bJ1hkskoWtu+9RLRTzCrGOOql7XsvD+1m3jvbJ1ha6uBi+mP73stCd+mH7RMsKnV8Ldy2770g+IXT9gkWkxyvhc/2vZcCjvDYPsEyEkFUCAiiVxZ4EmM81Yc6/KOvvaASw5PhcPikYqaQq5gBeFH1Ae9lod3ox0UQRD+/gyP6gwpU0V+44AiPZVtAsNB0YK7oLNsCgsWmbCzbgp4VsaC2bAu8l4ycLNuCHlzFrDeWbYH3wrE98xDCh6o0CC9i1VvLtoCoiHXvLdsCkjLOs7BsC5zLWGZl2RY4FXGVpWVb4PB6Os3Wsi3osIhF9pZtQQdlXBZj2Ra0fBWzoizbgpbKmBdp2RYYX8SqaMu2wKiItSzbCIMyzmXZhhxRxlKW3QIHFCHLbpM9X0+y7LbZsQhZdlfsYtkAHnc2UOnccRWybA9k2WTIssmQZZMRQnjjPYMQQgghhBBCCCFEZcIfdJ1SYekvaZ0AAAAASUVORK5CYII=)";
  previous_step_btn.style.position = "absolute";
  previous_step_btn.style.bottom = 0;
  previous_step_btn.style.left = 0;
  previous_step_btn.style.backgroundPosition = "center";
  previous_step_btn.style.backgroundRepeat = "no-repeat";
  previous_step_btn.style.width = "60px";
  previous_step_btn.style.height = "60px";
  previous_step_btn.style.margin = "0";
  previous_step_btn.style.marginLeft = "30px";
  previous_step_btn.style.backgroundSize = "contain";
  previous_step_btn.style.border = "none";
  previous_step_btn.style.transform = "scale(0.6)";
  previous_step_btn.style.backgroundColor = "transparent";
  previous_step_btn.style.cursor = "pointer";
  previous_step_btn.style.padding = "0";
  previous_step_btn.addEventListener("click", (event) => {
    event.preventDefault();
    goBackward();
  });
  document
    .getElementsByClassName("content-area")[0]
    .appendChild(previous_step_btn);
  document.getElementsByClassName("content-area")[0].appendChild(next_step_btn);

  ////////////////////////////////////////////////////////////// Tab 1

  ////////////////////////////////////// Section 1

  createInputRow(
    "content-1-step-1",
    "Deputy&Management",
    [
      {
        id: "K_Deputy",
        label: "معاونت",
        size: 4,
        type: "lookup",
        siteUrl: "/pmo/",
        listName: "Deputy",
        valueField: "Id",
        textField: "Title",
        saveId: true,
        onchangefunction: async () => {
          if (GetElement("K_DeputyId") != "") {
            setLookupOptions(
              "K_ManagementId",
              `DeputyId eq ${GetElement("K_DeputyId")}`,
            );
          }
          ProjectID = document.getElementById("K_ProjectNameId").value;
          ProjectDeputy = document.getElementById("K_DeputyId").value;
          ProjectManagement = document.getElementById("K_ManagementId").value;

          SetGlobalVariable([
            ["ProjectID", ProjectID],
            ["ProjectDeputy", ProjectDeputy],
            ["ProjectManagement", ProjectManagement],
          ]);
        },
      },
      {
        id: "Management&DeputyLabel",
        type: "label",
        nullElement: true,
        labelVisible: false,
        size: 2,
      },
      {
        id: "K_Management",
        label: "مدیریت",
        size: 4,
        type: "lookup",
        siteUrl: "/pmo/",
        listName: "Management",
        valueField: "Id",
        textField: "Title",
        saveId: true,
        filter: "Id eq 0",
        onchangefunction: async () => {
          if (
            GetElement("K_DeputyId") != "" &&
            GetElement("K_ManagementId") != ""
          )
            setLookupOptions(
              "K_ProjectNameId",
              `DeputyId eq ${GetElement(
                "K_DeputyId",
              )} and ManagementId eq ${GetElement("K_ManagementId")}`,
            );
          ProjectID = document.getElementById("K_ProjectNameId").value;
          ProjectDeputy = document.getElementById("K_DeputyId").value;
          ProjectManagement = document.getElementById("K_ManagementId").value;

          SetGlobalVariable([
            ["ProjectID", ProjectID],
            ["ProjectDeputy", ProjectDeputy],
            ["ProjectManagement", ProjectManagement],
          ]);
        },
      },
    ],
    10,
    10,
  );
  createInputRow(
    "content-1-step-1",
    "Project",
    [
      {
        id: "K_ProjectName",
        label: "پروژه",
        size: 5,
        type: "lookup",
        siteUrl: "/pmo/",
        listName: "ProjectSetting",
        valueField: "Id",
        textField: "Title",
        saveId: true,
        filter: "Id eq 0",
        onchangefunction: () => {
          ProjectID = document.getElementById("K_ProjectNameId").value;
          ProjectDeputy = document.getElementById("K_DeputyId").value;
          ProjectManagement = document.getElementById("K_ManagementId").value;

          SetGlobalVariable([
            ["ProjectID", ProjectID],
            ["ProjectDeputy", ProjectDeputy],
            ["ProjectManagement", ProjectManagement],
          ]);
        },
      },
    ],
    5,
    10,
  );

  ////////////////////////////////////// Section 2

  CreateGrid("content-1-step-2", {
    gridName: "ChangeTargets",
    gridDisplayName: "اهداف پروژه",
    showEditButton: true,
    showColumns: false,
    showDelteButton: false,
    columns: [
      {
        name: "Title",
        displayName: "عنوان",
        type: "text",
        disabled: false,
        textAlign: "right",
      },
    ],
    ParentList: "Closure",
    defaultGlobalColumns:
      '[{ "ProjectNameId": "ProjectID", "DeputyId": "ProjectDeputy" , "ManagementId": "ProjectManagement"}]',
    dataSource: {
      site: "/pmo/",
      listName: "ProjectObjective",
      query: `<View><Query><Where><Eq><FieldRef Name='ProjectName' LookupId='TRUE' /><Value Type='Lookup'>${ProjectID}</Value></Eq></Where></Query></View>`,
    },
    onEdit: (row, gridData) => {
      var rowType = "";
      var rowItemId = "";
      if (row.ID.toString().includes("NewItem")) {
        rowType = "new";
        rowItemId = row.ID;
      } else {
        rowType = "edit";
        rowItemId = row.ID;
      }
      ShowKModal(
        {
          title: "نیاز/الزام",
          width: 800,
          height: 600,
          backgroundColor: "#DFE7F5",
          headerColor: "#195A65",
          id: rowItemId,
          type: rowType,
          siteUrl: "/pmo",
          listName: "ProjectObjective",
          defaultColumns: '[{ "ClosureId": "' + ItemID + '"}]',
          gridData: gridData,
        },
        (modal) => {
          createInputRow(
            "k-modal-body-/pmo-ProjectObjective",
            "TitleName",
            [
              {
                id: "K_Modal_ProjectObjective_ProjectObjectiveTitle1",
                label: "ارزیابی",
                type: "title",
                size: 5,
                borderBottom: "1px #195A65 solid",
                color: "#195A65",
              },
            ],
            5,
            10,
          );
          createInputRow(
            "k-modal-body-/pmo-ProjectObjective",
            "Title",
            [
              {
                id: "K_Modal_ProjectObjective_Title",
                label: "عنوان",
                type: "text",
                disabled: true,
                size: 5,
              },
            ],
            5,
            10,
          );
          createInputRow(
            "k-modal-body-/pmo-ProjectObjective",
            "Status",
            [
              {
                id: "K_Modal_ProjectObjective_Status",
                label: "وضعیت",
                type: "radio",
                options: [
                  { label: "تحقق یافته", value: "تحقق یافته" },
                  { label: "تحقق ناقص", value: "تحقق ناقص" },
                  { label: "عدم تحقق", value: "عدم تحقق" },
                ],
                size: 2,
              },
            ],
            5,
            10,
          );
          createInputRow(
            "k-modal-body-/pmo-ProjectObjective",
            "Description",
            [
              {
                id: "K_Modal_ProjectObjective_Description",
                label: "توضیحات",
                type: "multiline",
                height: "150px",
                size: 5,
              },
            ],
            5,
            10,
          );
          createUploader(
            "k-modal-body-/pmo-ProjectObjective",
            "/pmo",
            {
              listTitle: "ProjectObjectiveClosureFiles",
              folderUrl: "shaparak/ProjectObjectiveClosureFiles",
            },
            { ProjectObjective: rowItemId },
            `<Eq><<FieldRef Name="ProjectObjective" LookupId="TRUE" /><Value Type="Integer">${rowItemId}</Value></Eq>`,
          );
        },
      );
    },
  });

  ////////////////////////////////////// Section 3
  debugger;
  CreateGrid("content-1-step-3", {
    gridName: "Changes",
    gridDisplayName: "تغییرات پروژه",
    showEditButton: false,
    showColumns: true,
    showDelteButton: true,
    columns: [
      {
        name: "Created",
        displayName: "تاریخ",
        type: "date",
        disabled: true,
        textAlign: "center",
      },
    ],
    initialData: [{ Created: new Date() }],
    ParentList: "Closure",
    defaultGlobalColumns:
      '[{ "ProjectNameId": "ProjectID", "DeputyId": "ProjectDeputy" , "ManagementId": "ProjectManagement"}]',
    dataSource: {
      site: "/pmo/",
      listName: "Change",
      query: `<View><Query><Where><Eq><FieldRef Name='ProjectName' LookupId='TRUE' /><Value Type='Lookup'>${ProjectID}</Value></Eq></Where></Query></View>`,
    },
    onEdit: (row) => console.log("Editing row:", row),
  });

  ////////////////////////////////////////////////////////////////////

  await loadSharePointItem("/pmo/", "Closure");

  if (ItemID == "NewItem") {
    var fileUploads = document.querySelectorAll("div[type='FileUploader']");

    fileUploads.forEach((fu) => {
      fu.style.display = "none";
    });
  }
  // Jalali activation
  jalaliDatepicker.startWatch();
}

main();
