import type { Meta, StoryObj } from "@storybook/react"
import {
  Sortable,
  SortableItem,
  SortableItemTrigger,
  SortableList,
  SortableOverlay,
  useSortableList,
} from "."

const meta: Meta = {
  title: "SortableList/SortableList",
  component: SortableList,
  parameters: {
    docs: {
      description: {
        component: "A sortable list component using dnd-kit, supporting drag-and-drop reordering.",
      },
    },
  },
}
export default meta

type Args = { initialItems: string[] }
type Story = StoryObj<Args>

const BasicStory = (args: Args) => {
  const { items, activeId, handleDragStart, handleDragEnd, handleDragCancel } = useSortableList({
    items: args.initialItems,
  })

  return (
    <Sortable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      onDragCancel={handleDragCancel}
    >
      <SortableList items={items} className="list-none p-0 w-60">
        {items.map(id => (
          <SortableItem
            key={id}
            id={id}
            className="flex items-center p-3 m-1 bg-gray-100 rounded-md shadow-sm"
          >
            <SortableItemTrigger className="mr-2 cursor-grab">☰</SortableItemTrigger>
            <span>{id}</span>
          </SortableItem>
        ))}
      </SortableList>
      <SortableOverlay>
        {activeId ? (
          <div className="flex items-center p-3 m-1 bg-gray-200 rounded-md shadow-lg">
            <span className="mr-2">☰</span>
            <span>{activeId}</span>
          </div>
        ) : null}
      </SortableOverlay>
    </Sortable>
  )
}

export const Basic: Story = {
  render: BasicStory,
  args: {
    initialItems: ["Item 1", "Item 2", "Item 3", "Item 4"],
  },
  argTypes: {
    initialItems: {
      control: { type: "object" },
      description: "Initial list of items to sort.",
    },
  },
}