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

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

    const ytList = controls.find("#yt-list");

    const carder = controls.find("#carder");
    const files4 = controls.find("#files4");
    const fl2 = controls.find("#carderfiles");

    carder.multiselect = true;

    carder.data = carder.data = [
    {
        title: "Elephant image with a deliberately long title to test the two-line ellipsis properly",
        thumbnail: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg",
        extension: "jpg",
        size: 145620,
        id: "image-001",
        source: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg"
    },
    {
        title: "Flower video",
        thumbnail: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg",
        extension: "mp4",
        duration: 30,
        size: 1128375,
        id: "video-001",
        source: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    },
    {
        title: "T-Rex roar audio",
        thumbnail: null,
        extension: "mp3",
        duration: 2,
        size: 32452,
        id: "audio-001",
        source: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
    },
    {
        title: "Plain text preview",
        extension: "txt",
        size: 824,
        id: "text-001",
        source: "https://raw.githubusercontent.com/mdn/content/main/README.md"
    },
    {
        title: "PDF preview test",
        thumbnail: null,
        extension: "pdf",
        size: 1016315,
        id: "pdf-001",
        source: "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf"
    },
    {
        title: "Windows executable",
        thumbnail: null,
        extension: "exe",
        size: 2849176,
        id: "exe-001",
        source: "https://example.com/files/setup.exe"
    },
    {
        title: "Unknown file type fallback",
        thumbnail: null,
        extension: "c0d3r",
        size: 654321,
        id: "unknown-001",
        source: "https://example.com/files/archive.c0d3r"
    }
];

    fl2.view = "list";

    files4.FiredEvent("files-update",e=>{
        const fdatas = [];
        console.log(e.files);
        Array.from(e.files).forEach(f=>{
            const fdata = {
                title: LIB.cleanString(f.name),
                extension: LIB.fileExtension(f.name),
                size: f.size,
                source: null
            };
            if (f.type.startsWith("image/")) fdata.thumbnail = f;
            
            fdatas.push(fdata);
        });
        fl2.data = fdatas;
    });



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

    const search = controls.find("#search");
    search.FiredEvent("key-pressed",e=>{
        if (e.key === "Enter"){
            ytList.clear();
            overlay.open("loader",{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.close("loader");
                    ytList.data = e.response;
                }
            });        
        }
    });

    ytList.singleClick(e=>{
        console.log(e);
    });

    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("dialog",{
            label: "Error",
            icon: "exclamation",
            width: "450px",
            height: "200px",
            buttons:[
                ["Close",()=>{
                    overlay.close("dialog");
                }]
            ],
            content:`
                Test
            `,
            onReady(buttons,content){}
        });
    });

    btnLoader.click(()=>{
        overlay.open("loader",{loader: "ripple-loader"});

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

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

    
    
});