import type { Meta, StoryObj } from '@storybook/react'
import { Button } from '../Button'
import { Typography } from '../Typography'
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from './sheet'

const meta: Meta<typeof SheetContent> = {
  title: 'Blocks/Sheet',
  component: SheetContent,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    side: {
      description: 'The side of the screen from which the sheet will appear.',
      options: ['top', 'bottom', 'left', 'right'],
      control: { type: 'select' },
      table: {
        type: { summary: "'top' | 'bottom' | 'left' | 'right'" },
        defaultValue: { summary: 'right' },
      },
    },
  },
}

export default meta
type Story = StoryObj<typeof SheetContent>

const renderSheet = (
  args: Story['args'],
  context: any,
  content: { title: string; description: string; button: string },
) => (
  <Sheet defaultOpen={context.viewMode === 'story'}>
    <SheetTrigger asChild>
      <Button variant="secondary">{content.button}</Button>
    </SheetTrigger>
    <SheetContent {...args}>
      <SheetHeader>
        <SheetTitle>{content.title}</SheetTitle>
        <SheetDescription>{content.description}</SheetDescription>
      </SheetHeader>
      <div className="p-6">
        <Typography variant="body-s" color="muted">
          This is the main content area of the sheet.
        </Typography>
      </div>
      <SheetFooter>
        <SheetClose asChild>
          <Button type="submit">Save changes</Button>
        </SheetClose>
        <SheetClose asChild>
          <Button variant="secondary">Cancel</Button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
)

export const Default: Story = {
  render: (args, context) =>
    renderSheet(args, context, {
      title: 'Sheet',
      description:
        'Use the Controls addon to change the side from which the sheet appears.',
      button: 'Open Sheet',
    }),
  args: {
    side: 'right',
  },
}

export const Top: Story = {
  render: (args, context) =>
    renderSheet(args, context, {
      title: 'Top Sheet',
      description: 'This sheet slides in from the top of the screen.',
      button: 'Open Top Sheet',
    }),
  args: {
    side: 'top',
  },
}

export const Bottom: Story = {
  render: (args, context) =>
    renderSheet(args, context, {
      title: 'Bottom Sheet',
      description: 'This sheet slides in from the bottom of the screen.',
      button: 'Open Bottom Sheet',
    }),
  args: {
    side: 'bottom',
  },
}

export const Left: Story = {
  render: (args, context) =>
    renderSheet(args, context, {
      title: 'Left Sheet',
      description: 'This sheet slides in from the left side of the screen.',
      button: 'Open Left Sheet',
    }),
  args: {
    side: 'left',
  },
}

export const Right: Story = {
  render: (args, context) =>
    renderSheet(args, context, {
      title: 'Right Sheet',
      description: 'This sheet slides in from the right side of the screen.',
      button: 'Open Right Sheet',
    }),
  args: {
    side: 'right',
  },
}

export const WithSimpleHeader = (_args: any) => (
  <Sheet>
    <SheetTrigger asChild>
      <Button variant="secondary">Trigger</Button>
    </SheetTrigger>
    <SheetContent>
      <SheetHeader>This is the main content area of the sheet.</SheetHeader>
      <SheetFooter>
        <SheetClose asChild>
          <Button type="submit">Save changes</Button>
        </SheetClose>
        <SheetClose asChild>
          <Button variant="secondary">Cancel</Button>
        </SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
)