import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
import { IconEdit, IconSortDescending, IconX } from '@tabler/icons-react'
import { ContainerHeader } from './ContainerHeader'
import { IconButton } from './IconButton'
import { MenuItem } from './Menu'
import { Card } from './Card'

// The top of a column: a surface with a hairline, so the bar's own hairline and height can be seen.
const inColumn: Decorator = (Story) => <Card clip className="w-96">{Story()}</Card>

const meta = {
  title: 'Navigation/ContainerHeader',
  component: ContainerHeader,
  args: { title: 'Items' },
  argTypes: { actions: { control: false } },
  decorators: [inColumn],
} satisfies Meta<typeof ContainerHeader>

export default meta
type Story = StoryObj<typeof meta>

/** A title that opens a menu: the title and its chevron are one button. Click it. */
export const WithTitleMenu: Story = {
  args: {
    title: 'View one',
    titleMenu: (
      <>
        <MenuItem label="View one" selected />
        <MenuItem label="View two" />
      </>
    ),
  },
}

/** A string title, one line, alone. */
export const Default: Story = {}

/** A chevron after the title, for a title that opens something. */
export const WithChevron: Story = { args: { title: 'All items', chevron: true } }

/** The column's own buttons at the right edge: IconButtons with tooltips. */
export const WithActions: Story = {
  args: {
    title: 'All items',
    chevron: true,
    actions: (
      <>
        <IconButton tooltip="Sort by" aria-label="Sort by">
          <IconSortDescending size={16} stroke={1.5} />
        </IconButton>
        <IconButton tooltip="New item" aria-label="New item">
          <IconEdit size={16} stroke={1.5} />
        </IconButton>
      </>
    ),
  },
}

/** A title that is not a string — a name over its caption — takes the room left and is drawn as given. */
export const WithRichTitle: Story = {
  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled: the caption
  // is muted text, 3.94:1 in signal (AA 4.5:1) — as Peek's file page draws it.
  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
  args: {
    title: (
      <div className="min-w-0">
        <p className="truncate text-body-2-strong text-text-primary">Quarterly plan</p>
        <p className="truncate text-caption text-text-muted">In Project Alpha</p>
      </div>
    ),
    actions: (
      <IconButton tooltip="Close" aria-label="Close">
        <IconX size={16} stroke={1.5} />
      </IconButton>
    ),
  },
}