import React, { useState } from 'react'
import { Button } from '../button'
import { View } from '../view'

const PACKAGE_NAV = [
  { id: 'home', label: 'Home', prefix: 'home' },
  { id: 'tasks', label: 'Tasks', prefix: 'calendar' },
  { id: 'calendar', label: 'Calendar', prefix: 'calendar' },
  { id: 'booking', label: 'Booking', prefix: 'calendar' },
  { id: 'analytics', label: 'Analytics', prefix: 'chart' },
]

const WORKSPACE_NAV = [
  { id: 'users', label: 'Users', prefix: 'user-list' },
  { id: 'invitations', label: 'Invitations', prefix: 'mail' },
  { id: 'settings', label: 'Settings', prefix: 'options' },
]

const navButtonStyle = {
  justifyContent: 'flex-start',
  padding: '8px 24px',
}

/**
 * Static sidebar demo for Storybook — simplified nav rail without shell dependencies.
 */
export const DemoSidebar = ({ selectedId: selectedIdProp, onSelect, small = false }) => {
  const [selectedId, setSelectedId] = useState(selectedIdProp ?? 'tasks')
  const activeId = selectedIdProp ?? selectedId

  const select = (id) => {
    if (selectedIdProp === undefined) setSelectedId(id)
    onSelect?.(id)
  }

  return (
    <View
      gap={small ? 's' : 'm'}
      style={{
        height: '100%',
        minWidth: small ? '3.5rem' : '12.5rem',
        maxWidth: small ? '3.5rem' : '15rem',
        padding: small
          ? 'var(--space-xs)'
          : 'var(--space-xs)',
        flexShrink: 0,
        boxSizing: 'border-box',
      }}
    >
      <View gap="s" style={{ flexGrow: 1, overflowY: 'auto', minHeight: 0 }} data-scroll>

        <View style={{ flexGrow: 1 }} />

        {PACKAGE_NAV.map((item) => (
          <Button
            key={item.id}
            variant={activeId === item.id ? 'cta' : 'link'}
            prefix={item.prefix}
            aria-current={activeId === item.id ? 'page' : undefined}
            onClick={() => select(item.id)}
            style={navButtonStyle}
          >
            {item.label}
          </Button>
        ))}

        <View style={{ flexGrow: 1 }} />

        {WORKSPACE_NAV.map((item) => (
          <Button
            key={item.id}
            variant={activeId === item.id ? 'cta' : 'link'}
            prefix={item.prefix}
            aria-current={activeId === item.id ? 'page' : undefined}
            onClick={() => select(item.id)}
            style={navButtonStyle}
          >
            {item.label}
          </Button>
        ))}
      </View>
    </View>
  )
}