import ASpinButton from '/js/libs/js-ASpinButton.js';
import ASlideDown from '/js/libs/js-ASlideDown.js';
import AButton from '/js/libs/js-AButton.js';
import AMultiTag from '/js/libs/js-AMultiTag.js';
import AModal from '/js/libs/js-AModal.js';
import ATab from '/js/libs/js-ATab.js';
import ASelect from '/js/libs/js-ASelect.js';
import AOverlay from '/js/libs/js-AOverlay.js';
import AWizard from '/js/libs/js-AWizard.js';
import AAutoFill from '/js/libs/js-AAutoFill.js';
import ATable from '/js/libs/js-ATable.js';

const tmp = `
<div class="slider-scrollbar" data-scrollbar>
  <div class="aslider">
    <h4 class="mb-2">Storage Server</h4>
    <div class="atabs">
      <div class="tab-item">
        <a href="javascript:void(0)" class="item active">Add New</a>
      </div>
      <div class="tab-item">
        <a href="javascript:void(0)" class="item">List Storage</a>
      </div>
      <div class="tab-item">
        <a href="javascript:void(0)" class="item">Test</a>
      </div>
    </div>
    <div class="StorageTabs tabcontents">
      <div class="d-f f-c tabcontent">
        <div class="AWizard tabcontents awStorageConnector">
          <div class="tabcontent">
            <div class="form-group">
              <h5 class="mb-2">Information Storage Configuration </h4>
            </div>
            <div class="d-f f-c">
              <div class="form-group d-f f-c">
                <label for="idType">Storage Server Type</label>
                <div class="input-group">
                  <select id="idType" class="aselect dropdown" data-width="auto" data-max-height="250" isSearch></select>
                </div>
              </div>
              <div class="form-group d-f f-c">
                <label for="controllerName">Controller Name</label>
                <div class="input-group">
                  <input id="controllerName" type="text" placeholder="Controller Name" validation-isEmpty />
                </div>
              </div>
              <div class="form-group d-f f-c">
                <label for="storageName">Storage Name</label>
                <div class="input-group">
                  <input id="storageName" type="text" placeholder="Storage Name" validation-isEmpty />
                </div>
              </div>
              <div class="form-group d-f f-c">
                <label for="validDomain">Validation Domain</label>
                <div class="input-group">
                  <select id="validDomain" class="aselect dropdown" data-width="auto" data-max-height="250" isMultiple></select>
                </div>
              </div>
            </div>
          </div>
          <div class="tabcontent">
            <div class="form-group">
              <h5 class="mb-2">Microsoft 365 Connnector </h4>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">Client ID</label>
              <div class="input-group">
                <input id="clientID" type="text" placeholder="Client ID" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="tenatID">Tenat ID</label>
              <div class="input-group">
                <input id="tenatID" type="text" placeholder="Tenat ID" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="secretID">Secret ID</label>
              <div class="input-group">
                <input id="secretID" type="text" placeholder="Secret ID" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="secretValue">Secret Value</label>
              <div class="input-group">
                <input id="secretValue" type="password" placeholder="Secret Value" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="expiredDate">Expires Date</label>
              <div class="input-group">
                <input id="expiredDate" type="password" placeholder="Expired Date" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="idSiteList">Sites List</label>
              <div class="input-group">
                <select id="idSiteList" class="aselect dropdown" data-width="auto" data-max-height="250" isSearch></select>
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="idDrivesList">Drives List</label>
              <div class="input-group">
                <select id="idDrivesList" class="aselect dropdown" data-width="auto" data-max-height="250" isSearch></select>
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="sharepointPath">SharePoint Path</label>
              <div class="input-group">
                <input id="sharepointPath" type="text" placeholder="Client ID" validation-isEmpty />
              </div>
            </div>
          </div>
          <div class="tabcontent">
            <div class="form-group">
              <h5 class="mb-2">Physical Server Connnector </h4>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">IP Public</label>
              <div class="input-group">
                <input id="ipPublic" data-id="publicIP" type="text" placeholder="IP Public" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">IP Private v4</label>
              <div class="input-group">
                <input id="ipPrivatev4" data-id="privateIP" type="text" placeholder="IP Private v4" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">IP Private v6</label>
              <div class="input-group">
                <input id="ipPrivatev6" data-id="privateIPv6" type="text" placeholder="IP Private v6" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">OS Name</label>
              <div class="input-group">
                <input id="osName" data-id="osName" type="text" placeholder="OS Name" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">OS Platform</label>
              <div class="input-group">
                <input id="osPlatform" data-id="osPlatform" type="text" placeholder="OS Platform" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">OS Version</label>
              <div class="input-group">
                <input id="osVersion" data-id="osVersion" type="text" placeholder="OS Version" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">OS Kernel</label>
              <div class="input-group">
                <input id="osKernel" data-id="osKernel" type="text" placeholder="OS Kernel" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">OS Architecture</label>
              <div class="input-group">
                <input id="osArch" data-id="osArch" type="text" placeholder="OS Architecture" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">Bios Serial Number</label>
              <div class="input-group">
                <input id="biosSerial" data-id="biosSerial" type="text" placeholder="Bios Serial Number" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">Bios Vendor</label>
              <div class="input-group">
                <input id="biosVender" data-id="biosVendor" type="text" placeholder="Bios Vendor" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">Bios UUID</label>
              <div class="input-group">
                <input id="biosUUID" data-id="biosUUID" type="text" placeholder="Bios UUID" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">Socket Number</label>
              <div class="input-group">
                <input id="socketN" data-id="socket" type="text" placeholder="Socket Number" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">CPU Name</label>
              <div class="input-group">
                <input id="cpuName" data-id="cpuName" type="text" placeholder="CPU Name" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="clientID">Total Ram(GB)</label>
              <div class="input-group">
                <input id="totalRam" data-id="totalRam" type="text" placeholder="Total Ram" validation-isEmpty />
              </div>
            </div>
          </div>
          <div class="tabcontent">
            <div class="form-group">
              <h5 class="mb-2">Server Authenicator </h4>
            </div>
            <div class="form-group d-f f-c">
              <label for="idToken">Token ID</label>
              <div class="input-group">
                <input id="idToken" type="text" placeholder="Token ID" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="vToken">Token Value</label>
              <div class="input-group">
                <input id="vToken" type="password" placeholder="Token Value" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="idRefreshToken">Refresh Token ID</label>
              <div class="input-group">
                <input id="idRefreshToken" type="text" placeholder="Refresh Token ID" validation-isEmpty />
              </div>
            </div>
            <div class="form-group d-f f-c">
              <label for="refreshTokenValue">Refresh Token Value</label>
              <div class="input-group">
                <input id="refreshTokenValue" type="password" placeholder="Refresh Token Value" validation-isEmpty />
              </div>
            </div>
          </div>
          <div class="tabcontent">
            <div class="form-group">
              <h5 class="mb-2">Storage Data Summary </h4>
            </div>
            <div class="form-group mb-0 d-f">
              <label>Storage Server Type</label>
              <span class="ml-2"></span>
            </div>
            <div class="form-group mb-0 d-f">
              <label>Controller Name</label>
              <span class="ml-2"></span>
            </div>
            <div class="form-group mb-0 d-f">
              <label>Storage Name</label>
              <span class="ml-2"></span>
            </div>
            <div class="form-group mb-0 d-f">
              <label>Validation Domains</label>
              <span class="ml-2"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="tabcontent">
        <div class="storageTb c-table"></div>
        <div class="form-group d-f p-0">
          <button id="btSaveST" type="button" class="btn btn-effect btn-primary mt-2  waves-effect waves-float d-f a-i-center">Save</button>
           </div>
      </div>
      <div class="tabcontent">
        <div>Tab C</div>
      </div>
    </div>
  </div>
</div>
`;
const lay1 = `
    <div class="w-100 h-100">
        <iframe id="authenMic"></iframe>
    </div>
`;
window.L6101 = function () {
    var asyncStyleSheets = [
        '/css/atg-ui/table.css'
    ];
    window.app.loadCSS(asyncStyleSheets);
    var ov = new AOverlay(document.body);
    ov.createOverlay();
    let tbSS = null;
    let eleSS = new ASlideDown(document.querySelectorAll(".aslidedown"));
    let pr1 = new Promise(async function (resolve, reject) {
        const response = await fetch("/Storage/CheckStorageInit", {
            method: 'GET',
            headers: {
                'Accept': 'application/json'
            }
        });
        const data = await response.json();
        if (data.Status == 1) {
            if (data.Message == "has") {
                eleSS.get(0).disable_Close();
                eleSS.get(1).enable_Open();
                eleSS.get(2).enable_Open();
            } else {
                eleSS.get(0).enable_Open();
                eleSS.get(1).disable_Close();
                eleSS.get(2).disable_Close();
                var ele1 = new ASpinButton(document.getElementById("totalSize"));
                var ele2 = new AMultiTag(document.getElementById("listStorage"));
                const $v = id => (document.getElementById(id)?.value ?? '').trim();
                var slider = new AModal(tmp);
                slider.createModal("CustomForm", "slider-right");
                var Scrollbar = window.Scrollbar;
                const mScroll = Scrollbar.init(slider.CustomContainer.querySelector(".slider-scrollbar"), window.scroll_options);
                slider.overlay.isCloseOverlay(true);
                var tabs = new ATab(slider.CustomContainer.querySelector(".atabs"), slider.CustomContainer.querySelector(".StorageTabs"));
                var wrd1 = new AWizard(slider.CustomContainer.querySelector(".awStorageConnector"));
                var as = new ASelect(slider.CustomContainer.querySelectorAll(".aselect"));
         
                var asIdType = as.get(0);
                wrd1.on("onBeforeBack", (evt) => {
                    mScroll.scrollTo(0, 0);
                });
                tabs.on("changed", (e) => {
                    if (e.tabIndex == 1) {
                        if (tbSS == null) {
                            tbSS = new ATable(document.querySelector(".storageTb"), 10);
                            tbSS.labelID = "idStorageServer";
                            tbSS.SetScrollBarY(400);
                            tbSS.AddHeader("Storage Name", "180px", "180px", "storageName");
                            tbSS.AddHeader("Storage Type", "180px", "180px", "typeName");
                            tbSS.AddHeader("Controller Name", "180px", "180px", "controllerID");
                            tbSS.AddHeader("Create Date", "240px", "240px", "createDate");
                            tbSS.IsCheckBox(true);
                            tbSS.LoadDataUrl("/Storage/GetStorage");
                        } else {
                          //  tb.RefreshCurrentPage();
                        }
                       
                    }
                  
                });
                wrd1.on("onAfterNext", (evt) => {
                    if (evt.indexPage > 0) {
                        if (as.get(0).isLockElement() || as.get(1).isLockElement()) {
                            return;
                        }
                        switch (asIdType.getSelectedItem().vSearch) {
                            case "Microsoft Cloud":
                                break;
                            case "Physical Server":
                                if (evt.indexPage > 3) {
                                    (async () => {

                                        const fd = new FormData();
                                        fd.append('StorageTypeID', asIdType.getSelectedItem()?.id ?? '');
                                        fd.append('ControllerName', $v('controllerName'));
                                        fd.append('StorageName', $v('storageName'));

                                        fd.append('IpPublic', $v('ipPublic'));
                                        fd.append('IpPrivatev4', $v('ipPrivatev4'));
                                        fd.append('IpPrivatev6', $v('ipPrivatev6'));

                                        fd.append('OsName', $v('osName'));
                                        fd.append('OsPlatform', $v('osPlatform'));
                                        fd.append('OsVersion', $v('osVersion'));
                                        fd.append('OsKernel', $v('osKernel'));
                                        fd.append('OsArch', $v('osArch'));

                                        fd.append('BiosSN', $v('biosSerial'));
                                        fd.append('BiosVendor', $v('biosVender'));
                                        fd.append('BiosUUID', $v('biosUUID'));

                                        const i = 0;
                                        as.get(1).multiSelectedItem.forEach((item) => {
                                            fd.append(`ValidationDomains[${i}].IdValidationDomain`, item.getAttribute("data-value"));
                                        });

                                        fd.append('SocketN', $v('socketN'));
                                        fd.append('CpuName', $v('cpuName'));
                                        fd.append('TotalRam', $v('totalRam'));

                                        fd.append('TokenID', $v('idToken'));
                                        fd.append('TokenValue', $v('vToken'));
                                        fd.append('RTokenID', $v('idRefreshToken'));
                                        fd.append('RTokenValue', $v('refreshTokenValue'))
                                        const response = await fetch("/Storage/SetStorageData", {
                                            method: 'POST',
                                            body: fd
                                        });
                                    })();

                                }
                                break;
                        }
                    }
                });
                wrd1.on("onBeforeNext", (evt) => {
                    mScroll.scrollTo(0, 0);
                    if (evt.indexPage == 0) {
                        if (as.get(0).isLockElement() || as.get(1).isLockElement()) {
                            wrd1.isStopNextPage = true;
                            return;
                        } else {
                            wrd1.isStopNextPage = false;
                        }
                        let flag = false;
                        if ($v('controllerName').length == 0) {
                            flag = true;
                        }
                        if ($v('storageName').length == 0) {
                            flag = true;
                        }
                        if (as.get(1).multiSelectedItem.length == 0) {
                            flag = true;
                        }
                        if (flag) {
                            wrd1.isStopNextPage = true;
                            return;
                        } else {
                            wrd1.isStopNextPage = false;
                        }
                        switch (asIdType.getSelectedItem().vSearch) {
                            case "Microsoft Cloud":
                                wrd1.showPage(1);
                                wrd1.hidePage(2);
                                wrd1.hidePage(3);
                                break;
                            case "Physical Server":
                                wrd1.showPage(2);
                                wrd1.showPage(3);
                                wrd1.hidePage(1);
                                let promise = new Promise(async function (resolve, reject) {
                                    const response = await fetch(`/Storage/GetSysInfo`, {
                                        method: 'GET',
                                        headers: {
                                            'Accept': 'application/json'
                                        }
                                    });
                                    const data = await response.json();
                                    if (data) {
                                        const autoF = new AAutoFill(document.querySelector(".awStorageConnector"));
                                        autoF.fill(data);
                                    }
                                });
                                break;
                        }
                    } else if (evt.indexPage == 1) {

                    }
                    else if (evt.indexPage == 2) {

                        (async () => {
                            const response = await fetch(`/Storage/GenerationAccessToken`, {
                                method: 'GET',
                                headers: {
                                    'Accept': 'application/json'
                                }
                            });
                            const data = await response.json();
                            if (data) {
                                document.getElementById("idToken").value = data.idToken;
                                document.getElementById("vToken").value = data.tokenValue;
                            }
                        })();
                        (async () => {
                            const response = await fetch(`/Storage/GenerationAccessToken`, {
                                method: 'GET',
                                headers: {
                                    'Accept': 'application/json'
                                }
                            });
                            const data = await response.json();
                            if (data) {
                                document.getElementById("idRefreshToken").value = data.idToken;
                                document.getElementById("refreshTokenValue").value = data.tokenValue;
                            }
                        })();
                    }

                }, true);
                var asVD = as.get(1);
                ele2.on("btnAdd_Click", (e) => {
                    asIdType.lockElement();
                    asVD.lockElement();
                    slider.showModal();
                    wrd1.renderTab();

                    let promise = new Promise(function (resolve, reject) {
                        const xhr = new XMLHttpRequest();
                        xhr.open("GET", window.GetAbsoluteURL("/Storage/GetTypeStorage"));
                        xhr.setRequestHeader('Accept', 'application/json; charset=UTF-8');
                        var f = function (ev) {
                            if (ev.currentTarget.readyState == 4) {
                                if (ev.currentTarget.status == 200) {
                                    var obj = JSON.parse(ev.currentTarget.responseText);
                                    var data = JSON.parse(obj.data);
                                    if (data != null && data.length > 0) {
                                        asIdType.element.removeAll();
                                        for (var i = 0; i < data.length; i++) {
                                            asIdType.element.insertAdjacentHTML("beforeend", `<option value="${data[i].ID}">${data[i].Type}</option>`);
                                        }
                                        asIdType.updateItem();
                                        asIdType.unlockElement();

                                    }
                                }
                            }
                        };
                        xhr.addEventListener("readystatechange", f, false);
                        xhr.send();
                    });
                    let promise1 = new Promise(function (resolve, reject) {
                        const xhr = new XMLHttpRequest();
                        xhr.open("GET", window.GetAbsoluteURL("/Storage/GetValidationDomain"));
                        xhr.setRequestHeader('Accept', 'application/json; charset=UTF-8');
                        var f = function (ev) {
                            if (ev.currentTarget.readyState == 4) {
                                if (ev.currentTarget.status == 200) {
                                    var obj = JSON.parse(ev.currentTarget.responseText);
                                    var data = JSON.parse(obj.data);
                                    if (data != null && data.length > 0) {
                                        asVD.element.removeAll();
                                        for (var i = 0; i < data.length; i++) {
                                            asVD.element.insertAdjacentHTML("beforeend", `<option value="${data[i].ID}">${data[i].Name}</option>`);
                                        }
                                        asVD.updateItem();
                                        asVD.unlockElement();
                                    }
                                }
                            }
                        };
                        xhr.addEventListener("readystatechange", f, false);
                        xhr.send();
                    });

                });

                let eleAddStorage = document.getElementById("btAddStorage");
                let asAddStorage = new AButton(eleAddStorage);
                asAddStorage.on("click_btAddStorage", (e) => {
                    const xhr = new XMLHttpRequest();
                    xhr.open("POST", "/Storage/AddStorageServer");
                    xhr.setRequestHeader('Accept', 'application/json; charset=UTF-8');
                    var data = {
                        "Name": document.getElementById("inpType").value
                    };

                    var f = function (ev) {
                        if (ev.currentTarget.readyState == 4) {
                            if (ev.currentTarget.status == 200) {
                                var obj = JSON.parse(ev.currentTarget.responseText);
                                if (ev.Status == 0) {
                                    m.AModalOK.title("Message Error", "mess-error");
                                    m.AModalOK.message(ev.Message);
                                } else {
                                    m.AModalOK.title("Message", "mess-success");
                                    m.AModalOK.message("Row Insert Success!");
                                }
                                m.showModal();
                            }
                        }

                    };
                    xhr.addEventListener("readystatechange", f, false);
                    xhr.send(JSON.stringify(data));
                });

                let btSaveST = new AButton(document.getElementById("btSaveST"));
                btSaveST.on("click_btSaveST", (evt) => {
                    const listC = tbSS.absRows.querySelectorAll("input[type=checkbox][rowCheck]:checked");
                    listC.forEach((el) => {
                        const rowST = tbSS.data[el.closest("tr").getAttribute("data-id")];
                        ele2.addItem(rowST.idStorageServer, rowST.storageName, rowST, null);
                    });
                    btSaveST.RemoveLoading(evt);
                    slider.removeModal();
                });

            }
        }
    });
    Waves.attach('.btn-effect', ['waves-float']);
    Waves.init({ duration: 1000, delay: 200 });

}


window.AScript.set("6101", true);