import * as React from 'react'

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

import { LxCard, type ILxCardBodyProps } from './'
import { View } from '@tarojs/components'

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

export default meta
type Story = StoryObj<typeof meta>

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
/**
 * 传递了 bodyLeft & bodyRight
 */
export const Basic = {
  args: {
    slotBodyLeft: <View>left</View>,
    slotBodyRight: <View>right</View>,
    marginTop: 20
  }
} satisfies Story

/**
 * 传递了 slotHeader
 */
export const BasicWithHeader = {
  args: {
    ...Basic.args,
    slotHeader: <View>这是头部</View>
  }
} satisfies Story

/**
 * 传递了 children
 */
export const BasicWithChildren = {
  args: {
    ...Basic.args,
    children: <View>这是 children </View>
  }
} satisfies Story

/**
 * 传递了 slotHeader & children
 */
export const BasicWithHeaderAndChildren = {
  args: {
    ...BasicWithHeader.args,
    ...BasicWithChildren.args
  }
} satisfies Story

// 场景2，仅仅传递slotBody
/**
 * 传递了 仅仅传递slotBody
 */
export const BodyCard = {
  args: {
    slotBody: <View>slot body</View>
  },
  render: (args: ILxCardBodyProps) => (
    <LxCard<ILxCardBodyProps> {...args} />
  )
}

/**
 * 传递了 slotBody & slotHeader
 */
export const BodyCardWithHeader = {
  args: {
    ...BodyCard.args,
    slotHeader: <View>这是头部</View>
  }
} satisfies Story

/**
 * slotBody & children
 */
export const BodyCardWithChildren = {
  args: {
    ...BodyCard.args,
    children: <View>这是 children </View>
  }
} satisfies Story

/**
 * slotBody & slotHeader & children
 */
export const BodyCardWithHeaderAndChildren = {
  args: {
    ...BodyCardWithHeader.args,
    ...BodyCardWithChildren.args
  },
  render: (args: ILxCardBodyProps) => (
    <LxCard<ILxCardBodyProps> {...args}></LxCard>
  )
}