import ASpinButton from '/js/libs/js-ASpinButton.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';

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="c-table">
                </div>
                   <div class="form-group d-f">
                            <button id="btAddStorage" type="button" class="btn btn-effect btn-primary mt-2  waves-effect waves-float d-f a-i-center">
                                Next
                            </button>
                             <button id="btReset" type="button" class="btn btn-effect btn-primary mt-2 ml-2  waves-effect waves-float d-f a-i-center">
                                Reset
                            </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();

    const $v = id => (document.getElementById(id)?.value ?? '').trim();
    var ele1 = new ASpinButton(document.getElementById("totalSize"));
    var ele2 = new AMultiTag(document.getElementById("listStorage"));

    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(".AWizard"));
    var as = new ASelect(slider.CustomContainer.querySelectorAll(".aselect"));
    window.testV = as;
    var asIdType = as.get(0);
    wrd1.on("onBeforeBack", (evt) => {
        mScroll.scrollTo(0, 0);
    });
    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();
        });

    });

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

    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));
    });

    //var btnAdd = document.getElementById("btAdd");

    //var tabs = new ATab(document.querySelector(".atabs"), document.querySelector(".tabcontents"));
    //var tb = new ATable(document.querySelector(".c-table"), 10);
    //var btUpdate = new AButton(document.getElementById("btUpdate"));
    //var btn = new AButton(btnAdd);
    //var m = new AModal(null);
    //var mU = new AModal(null);
    //var btBack = document.getElementById("btBack");
    //btBack.addEventListener("click", (e) => {
    //    tabs.selectedTab(0);
    //})
    //let promise = new Promise(function (resolve, reject) {
    //    tb.AddHeader("ID", "120px", "", "IdTypeStorageServer");
    //    tb.AddHeader("Storage Type Name", "", "240px", "TypeName");
    //    tb.AddHeader("Action", "180px", "", "Action", function (id, obj) {
    //        var ac = document.createElement("div");
    //        ac.classList.add("d-f", "j-c-center");
    //        var d = document.createElement("button");
    //        d.classList.add("btn", "btn-warning", "mr-2");
    //        var ico = document.createElement("span");
    //        ico.classList.add("atg", "atg-pencil");
    //        d.appendChild(ico);
    //        d.addEventListener("click", ((e) => { updateClick.call(tabs, e, id, obj); }));
    //        ac.appendChild(d);
    //        d = document.createElement("button");
    //        d.classList.add("btn", "btn-danger");
    //        var ico = document.createElement("span");
    //        ico.classList.add("atg", "atg-x");
    //        d.appendChild(ico);
    //        ac.appendChild(d);
    //        return ac;
    //    });
    //    tb.SetScrollBarY(300);
    //    tb.IsCheckBox(true);
    //    tb.LoadDataUrl("/Storage/GetTypeStorage");
    //});

    //m.overlay.setIndex(2101);
    //m.createModal("OK");
    //m.on("OK", () => {
    //    btn.RemoveLoading(btnAdd);
    //    tb.RefreshPage(1, true);
    //});
    //m.on("Close", () => { btn.RemoveLoading(btnAdd); });
    //btn.on("click_btAdd", function (e) {
    //    const xhr = new XMLHttpRequest();
    //    xhr.open("POST", "/Storage/AddType");
    //    xhr.setRequestHeader('Content-type', '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));
    //});

    //tabs.lockTabs.push(1);

    //mU.overlay.setIndex(2101);
    //mU.createModal("OK");
    //mU.on("OK", () => {
    //    btUpdate.RemoveLoading(document.getElementById("btUpdate"));
    //    tabs.selectedTab(0);
    //    tb.RefreshCurrentPage();
    //});
    //mU.on("Close", () => { btn.RemoveLoading(document.getElementById("btUpdate")); });

    //btUpdate.on("click_btUpdate", (evt) => {
    //    var inp = document.getElementById("inpEType");
    //    var inpID = document.getElementById("inpEID");
    //    if (inpID.value != "") {
    //        const xhr = new XMLHttpRequest();
    //        xhr.open("POST", "/Storage/UpdateType");
    //        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
    //        var data = {
    //            "ID": inpID.value,
    //            "Name": inp.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) {
    //                        mU.AModalOK.title("Message Error", "mess-error");
    //                        mU.AModalOK.message(ev.Message);
    //                    } else {
    //                        mU.AModalOK.title("Message", "mess-success");
    //                        mU.AModalOK.message("Row Update Success!");
    //                    }
    //                    mU.showModal();
    //                }
    //            }

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

    //var btSearch = new AButton(document.getElementById("btSearch"));
    //btSearch.on("click_btSearch", function (evt) {
    //    var fr = new FormData();
    //    fr.append("keyword", document.getElementById("inpKey").value);
    //    tb.LoadDataFirst(fr);
    //    btSearch.RemoveLoading(evt);
    //});
}

//function updateClick(e, id, obj) {
//    this.enableTab(1);
//    this.selectedTab(1);
//    var inp = document.getElementById("inpEType");
//    var inpID = document.getElementById("inpEID");
//    inp.value = obj.TypeName;
//    inpID.value = obj.IdTypeStorageServer;
//}



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