class DownloadsPanel extends Shadow {
    render() {
        ZStack(() => {
            input("", "60vw")
                .backgroundColor("var(--accent3)")
                .color("var(--accent)")
                .border("none")
                .borderTop("1px solid var(--accent)")
                .borderBottom("1px solid var(--accent)")
                .outline("0.5px solid black")
                .borderRadius(7, px)
                .transition("padding .2s")
                .padding(0.5, em)
                .position("absolute")
                .x(50, vw).y(7, em)
                .transform("translate(-50%, -50%)")
                .onInput(() => {
                    console.log('typing')
                })
                .onFocus(function (focusing) {
                    if(focusing) {
                        this.style.padding = "1em"
                        this.style.borderColor = "var(--darkred)"
                    } else {
                        this.style.padding = "0.5em"
                        this.style.borderColor = "var(--accent)"
                    }
                })
            
            // VStack(() => {
            //     const json = this.getJSONData()

            //     p(json.length + " Entries")
            //         .marginBottom(2, em)

            //     // Split into two alternating columns
            //     const left = []
            //     const right = []
                
            //     for (let i = 0; i < 200; i++) {
            //         if (i % 2 === 0) {
            //             left.push(json[i])
            //         } else {
            //             right.push(json[i])
            //         }
            //     }
                
            //     console.log(left)
            //     HStack(() => {
            //         // LEFT COLUMN
            //         VStack(() => {
            //             for (let item of left) {
            //                 p(item.name)
            //                     .marginLeft(0, em)
            //                     .marginBottom(0.1, em)
            //             }
            //         })

            //         // RIGHT COLUMN
            //         VStack(() => {
            //             for (let item of right) {
            //                 p(item.name)
            //                     .marginLeft(0, em)
            //                     .marginBottom(0.1, em)
            //             }
            //         })
            //         .marginLeft(3, em) // spacing between columns
            //     })
            // })
            // .paddingLeft(5, em)
            // .paddingTop(10, em)
        })
    }

    getJSONData() {
        const script = document.getElementById('jsonData');
        if (!script) {
            console.warn('initial-data script not found');
            return null;
        }

        try {
            // script.textContent is the raw JSON string
            const data = JSON.parse(script.textContent);
            console.log(data)
            return data;
        } catch (err) {
            console.error('Failed to parse initial-data JSON:', err);
            return null;
        }
    }
}

register(DownloadsPanel)