import type { Meta, StoryObj } from '@storybook/react'
import { SidebarProvider } from '../Navigation'
import { ThemeToggle } from './ThemeToggle'

const noopSetTheme = () => undefined

const meta = {
  title: 'Theme/ThemeToggle',
  component: ThemeToggle,
  args: {
    darkModeToggle: { theme: 'system', setTheme: noopSetTheme },
  },
  parameters: {
    docs: {
      description: {
        component:
          'A compact toggle component for switching between light, dark, and system themes. Used inside the Shell navigation bar.',
      },
    },
    viewport: {
      defaultViewport: 'mobile1',
    },
  },
} satisfies Meta<typeof ThemeToggle>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (_args) => (
    <ThemeToggle darkModeToggle={{ theme: 'system', setTheme: noopSetTheme }} />
  ),
}

export const LightSelected: Story = {
  render: (_args) => (
    <ThemeToggle darkModeToggle={{ theme: 'light', setTheme: noopSetTheme }} />
  ),
}

export const DarkSelected: Story = {
  render: (_args) => (
    <ThemeToggle darkModeToggle={{ theme: 'dark', setTheme: noopSetTheme }} />
  ),
}

export const InsideSidebar: Story = {
  render: (_args) => (
    <SidebarProvider renderLink={(props) => <a {...props} />}>
      <div className="flex h-64 w-20 flex-col items-center justify-end rounded-lg bg-muted p-4">
        <ThemeToggle
          darkModeToggle={{ theme: 'system', setTheme: noopSetTheme }}
        />
      </div>
    </SidebarProvider>
  ),
}