LIB.READY(()=>{
    controls.find("#help").appendChild(controls.help());

    const files3 = controls.find("#files3");
    const fl = controls.find("#file-list");
    const flDel = controls.find("#flDel");
    const flClear = controls.find("#flClear");

    const brBack = controls.find("#brBack");
    const brDel = controls.find("#brDel");
    const brClear = controls.find("#brClear");
    const brDownload = controls.find("#brDownload");
    const browse = controls.find("#browse");
    const jsonList = controls.find("#json-list");
    const ytList = controls.find("#yt-list");

    browse.walk("/");

    files3.FiredEvent("files-update",e=>{
        fl.data = e.files;
    });

    flDel.click(()=>{
        fl.del(items=>{
            console.log(items);
        });
    });

    flClear.click(()=>{
        fl.clear();
    });

    brBack.click(()=>{
        browse.back();
    });

    brDel.click(()=>{
        browse.del(items=>{
            console.log(items);
        });
    });

    brClear.click(()=>{
        browse.clear();
    });

    brDownload.click(()=>{
        browse.download()
    });

    jsonList.data = [
        {
            title:"Photo",
            image:"https://picsum.photos/300/200",
            extension:"jpg",
            size:245760
        },
        {
            title:"Ghostbusters",
            extension:"mp4",
            source:"https://sandbox.c0d3r.pw/data/Movies/Ghostbusters.mp4"
        },
        {
            title:"Enigma",
            extension:"mp3",
            source:"https://sandbox.c0d3r.pw/data/Music/enigma.mp3"
        },
        {
            title:"Velg",
            extension:"pdf",
            source:"https://sandbox.c0d3r.pw/data/Anything/velg.pdf"
        },
        {
            title:"CC",
            extension:"xlsx",
            source:"https://sandbox.c0d3r.pw/data/Anything/Credit-Cards-Table.xlsx"
        },
        {
            title:"class.controls.js.txt",
            extension:"txt",
            source:"https://sandbox.c0d3r.pw/data/Anything/class.controls.js.txt"
        }
    ];

    jsonList.item.FiredEvent("single-left-click", e=>{
        console.log("single", e);
    });

    jsonList.item.FiredEvent("double-left-click", e=>{
        console.log("double", e);
        //carder.open(e.item);
    });

    jsonList.item.FiredEvent("contextmenu", e=>{
        console.log("contextmenu", e);
    });

    const overlay = controls.find("#overlay");

    const search = controls.find("#search");
    search.FiredEvent("key-pressed",e=>{
        if (e.key === "Enter"){
            ytList.clear();
            overlay.loader = "ripple-loader";
            const keyword = search.value;
            search.value = "";
            LIB.AJAX("https://lib.dn-s.pw/api/yt", {
                keyword: keyword
            })
            .response(e=>{
                if (e.response.length > 0){
                    overlay.loader= false;
                    ytList.data = e.response;
                }
            });        
        }
    });

    ytList.item.FiredEvent("double-left-click",e=>{
        const pathname = e.item.source.parseUrl().pathname;
        const id = pathname.split("/").at(-1);
        const url = `https://lib.dn-s.pw/api/ytdl/${id}`
        
        console.log(url);

        LIB.silentFetch(url);
    });

    controls.find("#tabby").jump = 4;

    const btnTest1 = controls.find("#btTest1");
    const btnAlert = controls.find("#btTest4");
    const btnLoader = controls.find("#btTest5");

    btnTest1.click(e=>{
        console.log(e);
    });

    btnAlert.click(()=>{
        overlay.open({
            width: "700px",
            height: "180px",
            label: "Test",
            icon: "info",
            contents: `This is a fucking test`,
            buttons: [
                ["Click",(contents, buttons)=>{
                    console.log(contents, buttons)
                }],
                ["Close", null]
            ],
            loaded(contents, buttons){
                console.log(contents, buttons);
            }
        });
    });

    btnLoader.click(()=>{
        overlay.loader = "ripple-loader";

        setTimeout(()=>{
            overlay.loader = false;
        },5000);
    });

    const browse2 = controls.find("#browse2");
    browse2.walk("/");

    const group2 = controls.find("#group2");
    group2.buttons([
        ["Hello",(page, buttons)=>{
            console.log(page, buttons);
        }],
        ["Why",(page, buttons)=>{
            console.log(page, buttons);
            buttons[1].disableMe = true;
        }]
    ]);

    const group3 = controls.find("#group3");
    group3.next((page, index, next)=>{
        switch (index){
            case 0:
                if (!page.querySelector("#test-name").value) return;
            break;
            case 1:
                if (!page.querySelector("#test-email").value) return;
            break;
        }
        next();
    });

    group3.prev((page, index, prev)=>{
        console.log(page, index);
        prev();
    });

    group3.finish(page=>{
        if (!page.querySelector("#test-address").value) return;
        console.log("FINISHED!");
    });

    
    
});