import type { Meta, StoryObj } from '@storybook/react'

import { LxItemGroup } from './'

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta = {
  title: '基础组件/LxItemGroup',
  component: LxItemGroup,
  argTypes: {
  }
} satisfies Meta<typeof LxItemGroup>

export default meta
type Story = StoryObj<typeof meta>

const styleArgs = {
  borderRadius: 16,
  marginTop: 55
}

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
/**
 * LxItemGroup 基本用法1，仅仅传递 items 数组
 */
export const Basic = {
  args: {
    className: 'order-item-group',
    borderRadius: 16,
    items: [
      {
        label: '订单编号',
        value: '123123'
      },
      {
        label: '创建时间',
        value: '2023-05-10 12:52:32'
      },
      {
        label: '支付方式',
        value: '微信支付'
      }
    ]
  }
} satisfies Story

/**
 * 用法2：基本用法 & 带上样式
 *
 * 绑定样式属性有：
 *
 * BorderRadiusProps, MarginProps
 */
export const BasicWitchStyle = {
  args: {
    ...Basic.args,
    ...styleArgs
  }
} satisfies Story

/**
 * 用法3：传入子项 options，配置，开控制子项 lxItem的展示
 *
 * 字段请查看：Omit<INotSlot, 'label' | 'value'>。
 */
export const BasicWitchOptions = {
  args: {
    ...Basic.args,
    options: {
      marginTop: 20,
      borderRadius: 16,
      background: '#fff',
      leftColor: '#989EA9',
      rightColor: '#141E33',
      leftSize: 20,
      rightSize: 20
    }
  }
} satisfies Story