import { Box, Text, ProgressBar, VirtualList } from '@termuijs/widgets'

const container = new Box({
    flexDirection: 'column',
    border: 'rounded',
    padding: 1,
})

container.addChild(new Text({ content: 'Downloads', bold: true }))
container.addChild(new ProgressBar({ value: 0.73, width: 30 }))

// VirtualList renders only visible rows
const list = new VirtualList({
    totalItems: 100_000,
    renderItem: (i) => `Row ${i}`,
    onSelect: (i) => console.log('picked', i),
})
container.addChild(list)

const list = new VirtualList({
    totalItems: data.length,
    itemHeight: 1,
    overscan: 2,
    renderItem: (index) => `${data[index].name} — ${data[index].status}`,
    onSelect: (index) => inspect(data[index]),
})

// Navigation
list.selectNext()
list.selectPrev()
list.pageDown()
list.selectFirst()
list.selectLast()
list.scrollTo(500)
list.confirm()        // fires onSelect with current index

// Update data on the fly
list.setTotalItems(newData.length)
list.setRenderItem((i) => newData[i].label)