import { Button, Link } from "@radix-ui/themes"
import { dataListLabelPropDefs, dataListRootPropDefs } from "@radix-ui/themes/props"
import type { Meta, StoryObj } from "@storybook/react"
import { DataList } from "./DataList"

/**
 * The DataList component displays key-value pairs in a structured format.
 * It's perfect for showing details, specifications, or metadata.
 */
const meta = {
  title: "base/containment/DataList",
  component: DataList.Root,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    orientation: {
      control: { type: "select" },
      options: dataListRootPropDefs.orientation.values,
    },
    size: {
      control: { type: "select" },
      options: dataListRootPropDefs.size.values,
    },
  },
} satisfies Meta<typeof DataList.Root>

export default meta
type Story = StoryObj<typeof meta>

/**
 * Default data list with user information.
 */
export const Default: Story = {
  render: () => (
    <DataList.Root>
      <DataList.Item>
        <DataList.Label minWidth="88px">Name</DataList.Label>
        <DataList.Value>John Doe</DataList.Value>
      </DataList.Item>
      <DataList.Item>
        <DataList.Label minWidth="88px">Email</DataList.Label>
        <DataList.Value>
          <Link href="mailto:john.doe@example.com">john.doe@example.com</Link>
        </DataList.Value>
      </DataList.Item>
      <DataList.Item>
        <DataList.Label minWidth="88px">Status</DataList.Label>
        <DataList.Value>
          <Button color="green" size="1">
            Active
          </Button>
        </DataList.Value>
      </DataList.Item>
      <DataList.Item>
        <DataList.Label minWidth="88px">Bio</DataList.Label>
        <DataList.Value>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nisl et libero ultricies
          viverra quis vitae quam. Proin a feugiat metus.
        </DataList.Value>
      </DataList.Item>
      <DataList.Item>
        <DataList.Label minWidth="88px">Organization</DataList.Label>
        <DataList.Value>
          <Link href="https://workos.com" target="_blank">
            WorkOS
          </Link>
        </DataList.Value>
      </DataList.Item>
    </DataList.Root>
  ),
}

/**
 * Data lists can have horizontal or vertical orientations.
 */
export const Orientations: Story = {
  render: args => (
    <div className="space-y-6">
      {dataListRootPropDefs.orientation.values.map(orientation => (
        <div key={orientation}>
          <h3 className="text-lg font-medium capitalize mb-2">{orientation}</h3>
          <DataList.Root {...args} orientation={orientation}>
            <DataList.Item>
              <DataList.Label>Name</DataList.Label>
              <DataList.Value>Susan Kare</DataList.Value>
            </DataList.Item>
            <DataList.Item>
              <DataList.Label>Email</DataList.Label>
              <DataList.Value>susan.kare@apple.com</DataList.Value>
            </DataList.Item>
          </DataList.Root>
        </div>
      ))}
    </div>
  ),
}

/**
 * Data lists can have different sizes.
 */
export const Sizes: Story = {
  render: args => (
    <div className="space-y-6">
      {dataListRootPropDefs.size.values.map(size => (
        <div key={size}>
          <h3 className="text-lg font-medium mb-2">{`Size ${size}`}</h3>
          <DataList.Root {...args} size={size}>
            <DataList.Item>
              <DataList.Label>Name</DataList.Label>
              <DataList.Value>Susan Kare</DataList.Value>
            </DataList.Item>
            <DataList.Item>
              <DataList.Label>Email</DataList.Label>
              <DataList.Value>susan.kare@apple.com</DataList.Value>
            </DataList.Item>
          </DataList.Root>
        </div>
      ))}
    </div>
  ),
}

/**
 * Data list labels can have different colors.
 */
export const LabelColors: Story = {
  render: args => (
    <div className="grid grid-cols-2 gap-6">
      {dataListLabelPropDefs.color.values.map(color => (
        <div key={color}>
          <h3 className="text-lg font-medium capitalize mb-2">{color}</h3>
          <DataList.Root {...args}>
            <DataList.Item>
              <DataList.Label color={color}>Name</DataList.Label>
              <DataList.Value>Susan Kare</DataList.Value>
            </DataList.Item>
            <DataList.Item>
              <DataList.Label color={color} highContrast>
                Email
              </DataList.Label>
              <DataList.Value>susan.kare@apple.com</DataList.Value>
            </DataList.Item>
          </DataList.Root>
        </div>
      ))}
    </div>
  ),
}

/**
 * Data list labels can have different minimum widths.
 */
export const LabelWidths: Story = {
  render: args => (
    <div className="space-y-6">
      {["64px", "80px", "128px"].map(width => (
        <div key={width}>
          <h3 className="text-lg font-medium mb-2">{`Min-width: ${width}`}</h3>
          <DataList.Root {...args}>
            <DataList.Item>
              <DataList.Label minWidth={width}>Name</DataList.Label>
              <DataList.Value>Susan Kare</DataList.Value>
            </DataList.Item>
            <DataList.Item>
              <DataList.Label minWidth={width}>Email</DataList.Label>
              <DataList.Value>susan.kare@apple.com</DataList.Value>
            </DataList.Item>
          </DataList.Root>
        </div>
      ))}
    </div>
  ),
}