import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
 static targets = ["container", "leftButton", "rightButton"]
 static values = { 
 smooth: { type: Boolean, default: true }
 }
 connect() {
 // Optional: Hide arrows if content doesn't overflow
 this.checkOverflow()
 }
 scrollLeft() {
 this.scrollContainer(-this.getItemScrollDistance())
 }
 scrollRight() {
 this.scrollContainer(this.getItemScrollDistance())
 }
 scrollContainer(amount) {
 if (this.hasContainerTarget) {
 this.containerTarget.scrollBy({
 left: amount,
 behavior: this.smoothValue ? 'smooth' : 'auto'
 })
 }
 }
 getItemScrollDistance() {
 if (!this.hasContainerTarget) return 300
 
 const container = this.containerTarget
 
 // Try multiple selectors to find items
 let items = container.querySelectorAll('[class*="flex-shrink-0"]')
 if (items.length === 0) {
 items = container.querySelectorAll('.flex-shrink-0')
 }
 if (items.length === 0) {
 items = container.querySelectorAll('> div')
 }
 
 if (items.length === 0) return 300
 
 const firstItem = items[0]
 const itemWidth = firstItem.offsetWidth
 
 // Get computed styles to calculate margins/padding
 const computedStyle = window.getComputedStyle(firstItem)
 const marginLeft = parseFloat(computedStyle.marginLeft) || 0
 const marginRight = parseFloat(computedStyle.marginRight) || 0
 
 // Get container gap (if using CSS gap property)
 const containerGap = parseFloat(window.getComputedStyle(container).gap) || 0
 
 // Calculate total distance: item width + margins + gap
 const scrollDistance = itemWidth + marginLeft + marginRight + containerGap
 
 return scrollDistance
 }
 checkOverflow() {
 if (this.hasContainerTarget) {
 const container = this.containerTarget
 const hasOverflow = container.scrollWidth> container.clientWidth
 
 // Hide/show buttons based on overflow
 if (this.hasLeftButtonTarget) {
 this.leftButtonTarget.style.display = hasOverflow ? 'block' : 'none'
 }
 if (this.hasRightButtonTarget) {
 this.rightButtonTarget.style.display = hasOverflow ? 'block' : 'none'
 }
 }
 }
}
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://topenddevs.com/assets/controllers/horizontal_scroll_controller-127f1b8f.js">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://topenddevs.com/assets/controllers/horizontal_scroll_controller-127f1b8f.js" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>