import type { Meta, StoryObj } from '@storybook/react-vite'
import { expect } from 'storybook/test'

import { Sidebar } from './sidebar'

const meta = {
  component: Sidebar,
  tags: ['ai-generated'],
} satisfies Meta<typeof Sidebar>

export default meta
type Story = StoryObj<typeof meta>

// Expanded is the default wide-viewport state: the stored preference is "not
// collapsed", so the nav labels render inline next to their icons.
export const Expanded: Story = {
  beforeEach: () => {
    localStorage.setItem('sidebar-collapsed', 'false')
  },
  play: async ({ canvas }) => {
    await expect(canvas.getByRole('link', { name: 'Objects' })).toBeVisible()
    await expect(canvas.getByText('Vocabularies')).toBeVisible()
    await expect(
      canvas.getByRole('button', { name: 'Collapse sidebar' }),
    ).toBeVisible()
  },
}

// Collapsed rail: labels are no longer inline text — each link exposes its
// label only via `aria-label` (and a tooltip rendered in a portal).
export const Collapsed: Story = {
  beforeEach: () => {
    localStorage.setItem('sidebar-collapsed', 'true')
  },
  play: async ({ canvas }) => {
    const link = canvas.getByRole('link', { name: 'Objects' })
    await expect(link).toBeVisible()
    await expect(link).toHaveAttribute('aria-label', 'Objects')
    // No inline label text in the collapsed rail.
    await expect(canvas.queryByText('Vocabularies')).not.toBeInTheDocument()
    await expect(
      canvas.getByRole('button', { name: 'Expand sidebar' }),
    ).toBeVisible()
  },
}
