import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizeable'
import type { Meta, StoryObj } from '@storybook/react-vite'
import type { ComponentProps } from 'react'

type ResizableHandleProps = ComponentProps<typeof ResizableHandle>
type ResizablePanelGroupProps = ComponentProps<typeof ResizablePanelGroup>

// Define custom args that aren't component props
type StoryArgs = ResizableHandleProps & ResizablePanelGroupProps

const meta = {
  title: 'Resizeable',
  tags: ['autodocs'],
  component: ResizablePanelGroup,
  argTypes: {
    withHandle: {
      control: 'boolean',
      defaultValue: true,
      description: 'Whether to show the handle',
      table: {
        category: 'Props of "ResizableHandle"',
      },
    },
    direction: {
      control: 'radio',
      options: ['horizontal', 'vertical'],
      defaultValue: 'horizontal',
      description: 'The direction of the resizeable panels',
      table: {
        category: 'Props of "ResizablePanelGroup"',
      },
    },
  },
} satisfies Meta<StoryArgs>

export default meta

export const Default: StoryObj<StoryArgs> = {
  args: {
    withHandle: true,
    direction: 'horizontal',
  },
  render: (args) => (
    <div className="flex items-center justify-center">
      <ResizablePanelGroup
        direction={args.direction}
        className="max-w-md rounded-lg border md:min-w-[450px] min-h-[300px]"
      >
        <ResizablePanel defaultSize={50}>
          <div className="flex h-[200px] items-center justify-center p-6">
            <span className="font-semibold">One</span>
          </div>
        </ResizablePanel>
        <ResizableHandle withHandle={args.withHandle} />
        <ResizablePanel defaultSize={50}>
          <ResizablePanelGroup direction={'horizontal'}>
            <ResizablePanel defaultSize={25}>
              <div className="flex h-full items-center justify-center p-6">
                <span className="font-semibold">Two</span>
              </div>
            </ResizablePanel>
            <ResizableHandle withHandle={args.withHandle} />
            <ResizablePanel defaultSize={75}>
              <div className="flex h-full items-center justify-center p-6">
                <span className="font-semibold">Three</span>
              </div>
            </ResizablePanel>
          </ResizablePanelGroup>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  ),
}
