import type { Meta, StoryObj } from '@storybook/react'
import type React from 'react'
import { cn } from '../../utils'
import { createSizeDecorator } from '../../utils/decorators'
import { Button } from '../Button'
import { SidePanelHeader, SidePanelTitle } from '../SidePanel/SidePanel'
import { Sheet, SheetFooter, SheetTrigger } from './sheet'
import { SheetScrollArea, SheetSidebarContent } from './Sidebar'

export default {
  title: 'Blocks/SidePanel/Sidebar',
  component: Sheet,
  decorators: [createSizeDecorator('XS')],
} satisfies Meta<typeof Sheet>

type Story = StoryObj<typeof Sheet>

const PlaceholderContent: React.FC = () => (
  <div className="grid gap-2 p-6">
    {new Array(55).fill(0).map((_workflowId, i) => (
      <div
        className={cn(
          'h-4 animate-pulse bg-background-alt odd:w-96 odd:bg-brand even:w-80 even:bg-brand/50',
        )}
        style={{ animationDelay: `${i * 0.1}s` }}
        key={i}
      ></div>
    ))}
  </div>
)

export const Default: Story = {
  render: (_args, context) => (
    <Sheet defaultOpen={context.viewMode === 'story'}>
      <SheetTrigger asChild>
        <Button>Sidebar Without Footer</Button>
      </SheetTrigger>
      <SheetSidebarContent>
        <SidePanelHeader>
          <SidePanelTitle>Workflow Arigato Sama</SidePanelTitle>
        </SidePanelHeader>
        <SheetScrollArea>
          <PlaceholderContent />
        </SheetScrollArea>
      </SheetSidebarContent>
    </Sheet>
  ),
}

export const WithFooter: Story = {
  render: (_args, context) => (
    <Sheet defaultOpen={context.viewMode === 'story'}>
      <SheetTrigger asChild>
        <Button>Open Sidebar</Button>
      </SheetTrigger>
      <SheetSidebarContent variant="narrow">
        <SidePanelHeader>
          <SidePanelTitle>Workflow Arigato Sama</SidePanelTitle>
        </SidePanelHeader>
        <SheetScrollArea>
          <PlaceholderContent />
        </SheetScrollArea>
        <SheetFooter>Footer actions</SheetFooter>
      </SheetSidebarContent>
    </Sheet>
  ),
}

export const WideVariant: Story = {
  render: (_args, context) => (
    <Sheet defaultOpen={context.viewMode === 'story'}>
      <SheetTrigger asChild>
        <Button>Open Wide Sidebar</Button>
      </SheetTrigger>
      <SheetSidebarContent variant="wide">
        <SidePanelHeader>
          <SidePanelTitle>Wide Workflow Arigato Sama</SidePanelTitle>
        </SidePanelHeader>
        <SheetScrollArea>
          <PlaceholderContent />
        </SheetScrollArea>
        <SheetFooter>Footer actions</SheetFooter>
      </SheetSidebarContent>
    </Sheet>
  ),
}