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

import { LxButton } from './'

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta = {
  title: '基础组件/LxButton',
  component: LxButton,
  argTypes: {
    // Taro button 属性
    children: {
      defaultValue: '按钮',
      type: {
        name: 'string', required: true
      },
      description: '按钮展示的文字'
    },

    // 常见布局相关属性
    width: {
      defaultValue: 'auto',
      control: 'text',
      description: '按钮文字宽度，可以是 auto/number',
      table: {
        category: 'styled'
      }
    },
    fontSize: {
      defaultValue: 30,
      control: 'number',
      description: '按钮文字大小',
      table: {
        category: 'styled'
      }
    },
    fontWeight: {
      defaultValue: 'normal',
      control: 'radio',
      options: ['normal', 'bold'],
      description: '是否加粗',
      table: {
        category: 'styled'
      }
    },
    display: {
      defaultValue: 'inline-block',
      control: 'radio',
      options: ['inline-block', 'block'],
      description: '是否是块级属性，如果是 block，则宽度铺满',
      table: {
        category: 'styled'
      }
    },
    borderRadius: {
      defaultValue: 8,
      control: 'number',
      description: '圆角值',
      table: {
        category: 'styled'
      }
    },
    borderColor: {
      defaultValue: '#FF4500',
      control: 'color',
      description: '边框颜色',
      table: {
        category: 'styled'
      }
    },
    paddingTop: {
      defaultValue: 20,
      control: 'number',
      description: '上内边距',
      table: {
        category: 'styled'
      }
    },
    paddingBottom: {
      defaultValue: 20,
      control: 'number',
      description: '下内边距',
      table: {
        category: 'styled'
      }
    },
    paddingRight: {
      defaultValue: 49,
      control: 'number',
      description: '右内边距',
      table: {
        category: 'styled'
      }
    },
    paddingLeft: {
      defaultValue: 49,
      control: 'number',
      description: '左内边距',
      table: {
        category: 'styled'
      }
    },
    backgroundColor: {
      defaultValue: '#FF4500',
      control: 'color',
      description: '背景色',
      table: {
        category: 'styled'
      }
    },
    color: {
      defaultValue: '#ffffff',
      control: 'color',
      description: '文字颜色',
      table: {
        category: 'styled'
      }
    }
  }
} satisfies Meta<typeof LxButton>

export default meta
type Story = StoryObj<typeof meta>

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Basic = {
  args: {
    width: 'auto',
    fontSize: 30,
    fontWeight: 'normal',
    display: 'inline-block',
    borderRadius: 8,
    borderColor: '#FF4500',
    paddingTop: 20,
    paddingRight: 49,
    paddingBottom: 20,
    paddingLeft: 49,
    backgroundColor: '#FF4500',
    color: '#ffffff',
    children: '默认按钮'
  }
} satisfies Story

export const Basic22 = {
  args: {
    width: 'auto',
    fontSize: 30,
    fontWeight: 'normal',
    display: 'inline-block',
    borderRadius: 8,
    borderColor: '#FF4500',
    backgroundColor: '#FF4500',
    color: '#ffffff',
    children: '默认按钮'
  }
} satisfies Story