ScrollBox

import { ScrollBoxRenderable } from '@opentui/core'

const scrollBox = new ScrollBoxRenderable(renderer, {
  id: 'scroll-container',
  scrollY: true,
  scrollX: false,
  rootOptions: {
    backgroundColor: '#1e293b',
    border: true,
  },
})

// Add content
for (let i = 0; i < 100; i++) {
  const item = new BoxRenderable(renderer, {
    id: `item-${i}`,
    height: 3,
    backgroundColor: i % 2 === 0 ? '#334155' : '#475569',
  })
  scrollBox.add(item)
}

renderer.root.add(scrollBox)
scrollBox.focus() // Enable keyboard scrolling

scrollBox.scrollTop = 100  // Set scroll position
console.log(scrollBox.scrollTop)  // Get current position

scrollBox.scrollLeft = 50
console.log(scrollBox.scrollLeft)

console.log(scrollBox.scrollHeight)

console.log(scrollBox.scrollWidth)

// Scroll down by 10 pixels
scrollBox.scrollBy(10)

// Scroll in both directions
scrollBox.scrollBy({ x: 5, y: 10 })

// Scroll by percentage
scrollBox.scrollBy(0.5, 'percentage')  // 50% of viewport

// Scroll by page
scrollBox.scrollBy(1, 'page')  // One full page

// Scroll to position 100
scrollBox.scrollTo(100)

// Scroll to specific x, y coordinates
scrollBox.scrollTo({ x: 50, y: 100 })

// Scroll to top
scrollBox.scrollTo(0)

// Scroll to bottom
scrollBox.scrollTo(scrollBox.scrollHeight - scrollBox.viewport.height)

const item = new BoxRenderable(renderer, { id: 'item' })
scrollBox.add(item)

// Add at specific index
scrollBox.add(item, 0)  // Add at top

scrollBox.remove('item-1')

scrollBox.focus()

const scrollBox = new ScrollBoxRenderable(renderer, {
  id: 'basic-scroll',
  scrollY: true,
  rootOptions: {
    backgroundColor: '#1e293b',
    border: true,
    borderStyle: 'single',
  },
  padding: 2,
})

// Add many items
for (let i = 0; i < 100; i++) {
  const item = new TextRenderable(renderer, {
    content: `Item ${i + 1}`,
  })
  scrollBox.add(item)
}

renderer.root.add(scrollBox)
scrollBox.focus()

const scrollBox = new ScrollBoxRenderable(renderer, {
  id: 'styled-scroll',
  scrollY: true,
  scrollbarOptions: {
    showArrows: true,
    trackOptions: {
      foregroundColor: '#3b82f6',
      backgroundColor: '#1e293b',
    },
  },
  rootOptions: {
    border: true,
    backgroundColor: '#0f172a',
  },
})

const chatBox = new ScrollBoxRenderable(renderer, {
  id: 'chat',
  stickyScroll: true,
  stickyStart: 'bottom',
  scrollY: true,
  rootOptions: {
    backgroundColor: '#1e293b',
    border: true,
    title: 'Chat',
    titleAlignment: 'center',
  },
  padding: 1,
})

// Add messages dynamically
function addMessage(text: string) {
  const message = new TextRenderable(renderer, {
    content: text,
  })
  chatBox.add(message)
  // Automatically scrolls to bottom due to sticky scroll
}

renderer.root.add(chatBox)

const wideContent = new ScrollBoxRenderable(renderer, {
  id: 'horizontal-scroll',
  scrollX: true,
  scrollY: false,
  rootOptions: {
    border: true,
  },
  contentOptions: {
    flexDirection: 'row',
  },
})

for (let i = 0; i < 50; i++) {
  const item = new BoxRenderable(renderer, {
    id: `item-${i}`,
    width: 20,
    height: 10,
    backgroundColor: '#3b82f6',
    marginRight: 2,
  })
  wideContent.add(item)
}

renderer.root.add(wideContent)

const grid = new ScrollBoxRenderable(renderer, {
  id: 'grid-scroll',
  scrollX: true,
  scrollY: true,
  rootOptions: {
    border: true,
    backgroundColor: '#0f172a',
  },
  contentOptions: {
    flexDirection: 'column',
  },
})

// Create a large grid
for (let row = 0; row < 100; row++) {
  const rowBox = new BoxRenderable(renderer, {
    id: `row-${row}`,
    flexDirection: 'row',
    height: 3,
  })

  for (let col = 0; col < 50; col++) {
    const cell = new BoxRenderable(renderer, {
      id: `cell-${row}-${col}`,
      width: 15,
      backgroundColor: (row + col) % 2 === 0 ? '#1e293b' : '#334155',
      marginRight: 1,
    })
    rowBox.add(cell)
  }

  grid.add(rowBox)
}

renderer.root.add(grid)
grid.focus()

import { MacOSScrollAccel } from '@opentui/core'

const scrollBox = new ScrollBoxRenderable(renderer, {
  id: 'macos-scroll',
  scrollY: true,
  scrollAcceleration: new MacOSScrollAccel(),
  rootOptions: {
    border: true,
  },
})

const scrollBox = new ScrollBoxRenderable(renderer, {
  id: 'toggle-scroll',
  scrollY: true,
})

// Toggle visibility
renderer.keyInput.on('keypress', (key) => {
  if (key.name === 'v') {
    scrollBox.verticalScrollBar.visible = !scrollBox.verticalScrollBar.visible
  }
  if (key.name === 'h') {
    scrollBox.horizontalScrollBar.visible = !scrollBox.horizontalScrollBar.visible
  }
})

const scrollBox = new ScrollBoxRenderable(renderer, {
  id: 'no-culling',
  scrollY: true,
  viewportCulling: false,  // Render all children even if not visible
})

ScrollBox (root)
  └─ Wrapper
      ├─ Viewport (visible area)
      │   └─ Content (holds children, translates for scrolling)
      └─ HorizontalScrollBar
  └─ VerticalScrollBar

// With culling (default) - only renders ~20 items
const scrollBox = new ScrollBoxRenderable(renderer, {
  viewportCulling: true,  // default
})

// Add 10,000 items - still performs well
for (let i = 0; i < 10000; i++) {
  scrollBox.add(createItem(i))
}

const logViewer = new ScrollBoxRenderable(renderer, {
  stickyScroll: true,
  stickyStart: 'bottom',
})

// These additions will keep the view scrolled to bottom
logViewer.add(new TextRenderable(renderer, { content: 'Log 1' }))
logViewer.add(new TextRenderable(renderer, { content: 'Log 2' }))

// User scrolls up - sticky disabled
// User scrolls back to bottom - sticky re-enabled