import * as React from 'react'

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

import { LxItem, type IOnlySlot, type IOnlySlotLeft, type IOnlySlotRight } from './'
import { View } from '@tarojs/components'
import { LxBox } from '../lxBox'

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

export default meta
type Story = StoryObj<typeof meta>

const styleArgs = {
  borderRadius: 16,
  background: 'orange',
  paddingLeft: 55
}

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
// 默认用法
export const Basic = {
  args: {
    label: '左边',
    value: '右边'
  }
} satisfies Story

// 带上样式
export const BasicWithStyles = {
  args: {
    ...Basic.args,
    ...styleArgs
  }
} satisfies Story

// 用法2：仅仅有 slot 用法
export const OnlySlot = {
  args: {
    slotLeft: <View>left</View>,
    slotRight: <View>right</View>
  }
} satisfies StoryObj<Meta<typeof LxItem<IOnlySlot>>>

// 仅仅有 slot 用法 & 样式
export const OnlySlotWithStyle = {
  args: {
    ...OnlySlot.args,
    ...styleArgs
  }
} satisfies StoryObj<Meta<typeof LxItem<IOnlySlot>>>

// 用法3：传递了 slotLeft，value 是字符串
export const OnlySlotLeft = {
  args: {
    slotLeft: <View>left</View>,
    value: '右边内容',

    // 样式属性
    rightColor: '#464D5A',
    rightSize: 26,
    valueOnClick: (e) => { console.log(e) }
  }
} satisfies StoryObj<Meta<typeof LxItem<IOnlySlotLeft>>>

// 用法3：传递了 slotLeft，value 带上样式
export const OnlySlotLeftWithStyle = {
  args: {
    ...OnlySlotLeft.args,
    ...styleArgs
  }
} satisfies StoryObj<Meta<typeof LxItem<IOnlySlotLeft>>>

// 用法4：传递 slotRight & label
export const OnlySlotRight = {
  args: {
    slotRight: <View>right</View>,
    label: 'left',

    // 样式属性
    leftColor: '#12151B',
    leftSize: 26
  }
} satisfies StoryObj<Meta<typeof LxItem<IOnlySlotRight>>>

// 用法4，带上样式
export const OnlySlotRightWithStyle = {
  args: {
    slotRight: <View>right</View>,
    label: 'left',

    // 左边属性样式
    leftColor: '#12151B',
    leftSize: 26,

    // 布局颜色相关样式
    ...styleArgs
  }
} satisfies StoryObj<Meta<typeof LxItem<IOnlySlotRight>>>

export const WithLxBoxAndLxItem = {
  args: {
    label: '左边',
    value: '右边',
    padding: 20,
    borderRadius: 0,
    borderBottom: '1px solid #eaeaea'
  },

  render: (args: any) => {
    return (
      <LxBox backgroundColor='#fff' borderRadius={20} paddingLeft={30} paddingRight={30}>
        <LxItem {...args}></LxItem>
        <LxItem {...args}></LxItem>
        <LxItem {...args}></LxItem>
      </LxBox>
    )
  }
} satisfies Story